@import "tailwindcss";
@import "tw-animate-css";

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

:root {
  --font-arabic: "Noto Kufi Arabic", sans-serif;
  --font-english-body: "Avenir LT Pro", sans-serif;
  --font-english-heading: "Unbounded", sans-serif;
  --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);
}

@theme {
  --color-primary-midnight_green-main: #00424b;
  --color-primary-midnight_green-lighter: #a3c9cc;
  --color-primary-midnight_green-light: #4d8b92;
  --color-primary-midnight_green-dark: #00343a;
  --color-primary-midnight_green-darker: #001f23;

  --color-primary-rich_black-main: #0d1b27;

  --color-primary-dark_cyan-main: #169696;
  --color-primary-dark_cyan-lighter: #b7e7e7;
  --color-primary-dark_cyan-light: #6fd0d0;
  --color-primary-dark_cyan-dark: #0e6a6a;
  --color-primary-dark_cyan-darker: #064242;
  --color-primary-dark_cyan-8: rgba(22, 150, 150, 0.08);
  --color-primary-dark_cyan-24: rgba(22, 150, 150, 0.24);
  --color-primary-dark_cyan-32: rgba(22, 150, 150, 0.32);
  --color-primary-dark_cyan-48: rgba(22, 150, 150, 0.48);

  --color-primary-anti_flash_white-main: #f2f3f4;

  --color-secondary-coral_blue-main: #a9dacb;

  --color-secondary-brown_sugar-main: #b36935;
  --color-secondary-brown_sugar-light: #d9a980;
  --color-secondary-brown_sugar-dark: #8f4f29;
  --color-secondary-brown_sugar-darker: #6b3b1f;
  --color-secondary-brown_sugar-lighter: #f3d5c0;

  --color-secondary-raspberry-main: #90294f;

  --color-black-gray-main: #303030;
  --color-gray-main: #919eab;

  --color-secondary-vanilla-main: #e9d8a6;

  --color-other-light_gray: #f9f9f9;
  --color-other-white: #fefefe;

  --font-arabic: var(--font-arabic), system-ui, sans-serif;
  --font-english-body: var(--font-english-body), system-ui, sans-serif;
  --font-english-heading: var(--font-english-heading), system-ui, sans-serif;
}

html[lang="ar"] {
  font-family: var(--font-arabic), sans-serif;
}

html[lang="en"] {
  font-family: var(--font-english-body), sans-serif;
}

html[lang="en"] h1 {
  font-family: var(--font-english-heading), sans-serif;
}

@layer utilities {
  /* ===== HERO SECTION ===== */
  .hero-section {
    @apply relative  w-full bg-center bg-cover bg-no-repeat pt-20 overflow-hidden;

    h1 {
      @apply text-[32px] leading-10 sm:text-[64px] sm:leading-15 md:pt-20 font-bold whitespace-pre-line text-secondary-coral_blue-main;
    }

    p {
      @apply text-[16px] sm:text-[32px] mx-auto leading-relaxed px-2 md:px-0;
    }
  }

  .hero-content {
    @apply relative z-20 flex flex-col items-center justify-center pt-10 sm:pt-20 text-center text-white;
  }

  .hero-text-container {
    @apply max-w-4xl flex flex-col items-center justify-center gap-10 sm:gap-12;
  }

  .bg-hero-overlay {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 44.39%,
        #fefefe 100%
      ),
      radial-gradient(
        47.43% 47.43% at 50% 52.57%,
        rgba(0, 52, 58, 0.6) 0%,
        rgba(0, 52, 58, 0) 100%
      );
  }

  /* ===== HERO SECTION V2 ===== */
  .hero-section-v2 {
    @apply relative  w-full bg-center bg-cover bg-no-repeat pt-20 overflow-hidden;
    /* 
    h1 {
      @apply uppercase text-[32px] leading-10 sm:text-[64px] sm:leading-[72px] md:pt-20 font-bold whitespace-pre-line text-secondary-coral_blue-main;
    }

    p {
      @apply text-[16px] sm:text-[32px] mx-auto leading-relaxed px-2 md:px-0;
    } */
  }

  .hero-content-v2 {
    @apply relative z-20 flex flex-col items-center justify-center pt-10 sm:pt-20 text-center text-white;
    h1 {
      @apply max-w-[590px] px-4 mx-auto uppercase text-[32px] leading-10 md:text-[48px] sm:leading-[52.8px] md:pt-20 font-bold whitespace-pre-line text-secondary-coral_blue-main;
    }

    p {
      @apply text-[16px] sm:text-[32px] mx-auto leading-relaxed px-2 md:px-0;
    }
  }

  .hero-text-container-v2 {
    @apply max-w-4xl flex flex-col items-center justify-center gap-10 sm:gap-12;
  }

  .bg-hero-overlay-v2 {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 44.39%,
        #fefefe 100%
      ),
      radial-gradient(
        47.43% 47.43% at 50% 52.57%,
        rgba(0, 52, 58, 0.6) 0%,
        rgba(0, 52, 58, 0) 100%
      );
  }

  /* ===== COUNTDOWN COMPONENT ===== */
  .countdown-container {
    @apply pt-2 md:pt-4 flex justify-center;
  }

  .countdown-grid {
    @apply grid grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12 items-center justify-center;
  }

  .countdown-item {
    @apply flex items-center justify-center;
  }

  .countdown-box {
    @apply relative flex h-[80px] w-[80px] sm:h-[100px] sm:w-[100px] md:h-[120px] md:w-[120px] lg:h-[140px] lg:w-[140px] xl:h-[160px] xl:w-[160px] flex-col items-center justify-center gap-5 lg:gap-10;
    background: transparent;
    border: none;
    padding: 0;
  }

  .countdown-value {
    @apply text-[32px] sm:text-[48px]  font-extrabold text-white leading-none;
  }

  .countdown-label {
    @apply text-[14px] sm:text-[18px]  tracking-[0.2em] text-white/90 uppercase;
  }

  .countdown-divider {
    @apply w-px h-12 sm:h-14 md:h-16 lg:h-18 xl:h-20 bg-white mx-2;
  }

  .countdown-days {
    background: transparent;
  }

  .countdown-hours {
    background: transparent;
  }

  .countdown-minutes {
    background: transparent;
  }

  .countdown-seconds {
    background: transparent;
  }

  /* ===== COUNTDOWN COMPONENT V2 ===== */
  .countdown-container-v2 {
    @apply py-5 px-5 md:py-10 md:px-10 flex flex-col gap-5 md:gap-10 items-center;
    background: rgba(255, 255, 255, 0.2);
  }

  .countdown-grid-v2 {
    @apply grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-5 items-center justify-center;
  }

  .countdown-item-v2 {
    @apply flex items-center justify-center;
  }

  .countdown-box-v2 {
    @apply relative flex h-[80px] w-[80px] sm:h-[100px] sm:w-[100px] md:h-[120px] md:w-[120px] lg:h-[140px] lg:w-[140px] xl:h-[160px] xl:w-[160px] flex-col items-center justify-center gap-5 lg:gap-10;
    background: transparent;
    border: none;
    padding: 0;
  }

  .countdown-value-v2 {
    @apply text-[32px] sm:text-[48px]  font-extrabold text-white leading-none;
  }

  .countdown-label-v2 {
    @apply text-[14px] sm:text-[18px]  tracking-[0.2em] text-white/90 uppercase;
  }

  .countdown-divider-v2 {
    @apply w-px h-12 sm:h-14 md:h-16 lg:h-18 xl:h-20 bg-white mx-2;
  }

  .countdown-days-v2 {
    background: transparent;
  }

  .countdown-hours-v2 {
    background: transparent;
  }

  .countdown-minutes-v2 {
    background: transparent;
  }

  .countdown-seconds-v2 {
    background: transparent;
  }

  /* ===== UTILITY CLASSES ===== */
  .container-mobile {
    @apply px-4 md:px-6 lg:px-8 xl:px-12;
  }

  .section-padding {
    @apply py-8 md:py-12 lg:py-16 xl:py-20;
  }

  .section-margin {
    @apply my-6 md:my-8 lg:my-12 xl:my-16;
  }

  .text-mobile-heading {
    @apply text-2xl md:text-3xl lg:text-4xl xl:text-5xl 2xl:text-6xl;
  }

  .text-mobile-body {
    @apply text-base md:text-lg lg:text-xl xl:text-2xl;
  }

  .text-mobile-small {
    @apply text-sm md:text-base lg:text-lg;
  }

  .grid-mobile {
    @apply grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
  }

  .grid-mobile-2 {
    @apply grid-cols-1 md:grid-cols-2;
  }

  .grid-mobile-3 {
    @apply grid-cols-1 md:grid-cols-2 lg:grid-cols-3;
  }

  .btn-hero {
    @apply px-6 w-fit relative;
    background: linear-gradient(94deg, #00424b -0.23%, #169696 102.05%);
    display: inline-block;
    overflow: visible;
    text-align: center;
    position: relative;
  }

  .btn-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #8592ad;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
  }

  .btn-hero:hover::before {
    opacity: 0.2;
  }

  .btn-hero span {
    position: absolute;
    display: block;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
    will-change: background-position, opacity;
  }

  .btn-hero:hover span {
    opacity: 1;
  }

  /* TOP */
  .btn-hero span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
      to left,
      transparent,
      var(--color-primary-dark_cyan-main)
    );
    background-size: 200% 100%;
    background-position: 200% 0;
  }
  .btn-hero:hover span:nth-child(1) {
    animation: moveBg 2s linear infinite;
  }

  /* RIGHT */
  .btn-hero span:nth-child(2) {
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(
      to top,
      transparent,
      var(--color-primary-dark_cyan-main)
    );
    background-size: 100% 200%;
    background-position: 0 200%;
  }
  .btn-hero:hover span:nth-child(2) {
    animation: moveBgY 2s linear infinite;
  }

  /* BOTTOM */
  .btn-hero span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
      to right,
      transparent,
      var(--color-primary-dark_cyan-main)
    );
    background-size: 200% 100%;
    background-position: -200% 0;
  }
  .btn-hero:hover span:nth-child(3) {
    animation: moveBg 2s linear infinite reverse;
  }

  /* LEFT */
  .btn-hero span:nth-child(4) {
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(
      to bottom,
      transparent,
      var(--color-primary-dark_cyan-main)
    );
    background-size: 100% 200%;
    background-position: 0 -200%;
  }
  .btn-hero:hover span:nth-child(4) {
    animation: moveBgY 2s linear infinite reverse;
  }

  .btn-hero-v2 {
    @apply px-6 w-fit relative;
    background: linear-gradient(94deg, #00424b -0.23%, #169696 102.05%);
    display: inline-block;
    /* overflow: visible; */
    text-align: center;
    position: relative;
    border-radius: 8px;
    border: 2px solid rgba(22, 150, 150, 0);
    box-shadow: 0 3px 4px 0 rgba(169, 218, 203, 0.5);
  }

  .btn-hero-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #8592ad;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
  }

  .btn-hero-v2:hover::before {
    opacity: 0.2;
  }

  .btn-hero-v2 span {
    position: absolute;
    display: block;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
    will-change: background-position, opacity;
    border-radius: 8px;
  }

  .btn-hero-v2:hover span {
    opacity: 1;
  }

  /* TOP */
  .btn-hero-v2 span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      to left,
      transparent,
      var(--color-primary-dark_cyan-main)
    );
    background-size: 200% 100%;
    background-position: 200% 0;
  }
  .btn-hero-v2:hover span:nth-child(1) {
    animation: moveBg 2s linear infinite;
  }

  /* RIGHT */
  .btn-hero-v2 span:nth-child(2) {
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
      to top,
      transparent,
      var(--color-primary-dark_cyan-main)
    );
    background-size: 100% 200%;
    background-position: 0 200%;
  }
  .btn-hero-v2:hover span:nth-child(2) {
    animation: moveBgY 2s linear infinite;
  }

  /* BOTTOM */
  .btn-hero-v2 span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      var(--color-primary-dark_cyan-main)
    );
    background-size: 200% 100%;
    background-position: -200% 0;
  }
  .btn-hero-v2:hover span:nth-child(3) {
    animation: moveBg 2s linear infinite reverse;
  }

  /* LEFT */
  .btn-hero-v2 span:nth-child(4) {
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
      to bottom,
      transparent,
      var(--color-primary-dark_cyan-main)
    );
    background-size: 100% 200%;
    background-position: 0 -200%;
  }
  .btn-hero-v2:hover span:nth-child(4) {
    animation: moveBgY 2s linear infinite reverse;
  }

  @keyframes moveBg {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
  @keyframes moveBgY {
    0% {
      background-position: 0 200%;
    }
    100% {
      background-position: 0 -200%;
    }
  }

  /* ===== BUTTONS ===== */
  .btn-feature-card {
    @apply relative overflow-hidden bg-transparent border-2 px-[22px] py-[8px] text-lg font-medium transition-all duration-500 text-secondary-coral_blue-main border-secondary-coral_blue-main;
    .triangle-btn {
      @apply absolute bottom-0 right-0 w-0 h-0 border-l-[20px] border-l-transparent border-b-[20px] border-b-secondary-coral_blue-main transition-all duration-500;
      /* border-left-color: var(--color-secondary-coral_blue-main) !important; */
    }
    &:hover {
      @apply text-white;
    }
    &:hover .triangle-btn {
      @apply z-0 border-b-[1000px] border-l-[10000px] border-b-secondary-coral_blue-main;
    }
  }

  .btn-feature-card-v2 {
    @apply cursor-pointer relative overflow-hidden bg-transparent rounded-[8px] border-2 px-[22px] py-[8px] text-lg font-medium transition-all duration-500 text-secondary-coral_blue-main border-secondary-coral_blue-main;
    .triangle-btn-v2 {
      @apply absolute bottom-0 right-0 w-0 h-0 border-l-[20px] border-l-transparent border-b-[20px] border-b-secondary-coral_blue-main transition-all duration-500;
      /* border-left-color: var(--color-secondary-coral_blue-main) !important; */
    }
    &:hover {
      @apply text-white;
    }
    &:hover .triangle-btn-v2 {
      @apply z-0 border-b-[1000px] border-l-[10000px] border-b-secondary-coral_blue-main;
    }
  }

  .about-video-overlay {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 60.45%,
        #fff 100%
      ),
      linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 21.72%),
      linear-gradient(
        270deg,
        rgba(255, 255, 255, 0) 5.92%,
        rgba(255, 255, 255, 0.9) 61.28%
      );
  }

  .about-triangle-section {
    @apply relative w-full;

    .about-triangle-section-background {
      @apply relative z-1 w-[300px] h-[450px] sm:w-[400px] sm:h-[500px] md:w-[518px] md:h-[550px];
      border-radius: 0 100px 100px 0;
      background: linear-gradient(0deg, #a9dacb -11.18%, #5a746c 112.54%);
    }
    .about-triangle-section-container {
      @apply absolute right-4 top-18 sm:right-16 z-10 w-[350px] h-[300px] sm:w-[500px] sm:h-[350px] md:w-[600px] md:h-[400px] rounded-3xl;
    }
    .about-triangle-section-video {
      @apply rounded-3xl z-2 w-full h-full object-cover;
      box-shadow: 10px 20px 50px 0 rgba(105, 105, 105, 0.87);
    }
  }

  [dir="rtl"] .about-triangle-section-background {
    border-radius: 100px 0 0 100px;
  }
  [dir="rtl"].about-triangle-section-container {
    @apply left-0;
  }

  .photo-section-right {
    @apply relative w-full flex justify-end;
    .background-photo-section-right {
      @apply relative z-1 w-[300px] h-[450px] sm:w-[400px] sm:h-[500px] md:w-[518px] md:h-[550px];
      border-radius: 100px 0 0 100px;
      background: linear-gradient(0deg, #a9dacb -11.18%, #5a746c 112.54%);
    }
    .container-photo-section-right {
      @apply absolute left-4 top-18 sm:left-16 z-10 w-[350px] h-[300px] sm:w-[500px] sm:h-[350px] md:w-[600px] md:h-[400px] rounded-3xl;
    }
    .photo-section-right-image {
      @apply rounded-3xl z-2 w-full h-full object-cover;
      box-shadow: 10px 20px 50px 0 rgba(105, 105, 105, 0.87);
    }
  }

  [dir="rtl"] .background-photo-section-right {
    border-radius: 0 100px 100px 0;
  }

  /* ===== TRIANGLE BUTTONS ===== */
  .triangle-dynamic-colors {
    border-bottom-color: var(--triangle-color) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .triangle-dynamic-colors.group-hover\:border-l-\[1000px\]:hover {
    border-left-color: var(--triangle-color) !important;
  }

  /* ===== DUOCOLOR BUTTON ===== */
  .duoColor-button {
    border: 2px solid var(--duo-color);
    color: var(--duo-color);
    background: transparent;
    transition: all 0.3s ease;
  }

  .duoColor-button:hover {
    background: var(--duo-color);
    color: var(--duo-hover-text-color);
  }

  /* Triangle button text hover effect */
  .triangle-button:hover span[data-hover-color] {
    color: var(--hover-color) !important;
  }

  /* Enhanced triangle button transitions */
  .triangle-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .triangle-button:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  .triangle-button span {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* ===== SECTIONS ===== */

  .about-section {
    @apply relative w-full bg-center bg-cover bg-no-repeat;
  }

  .about-section-v2 {
    @apply px-0 grid grid-cols-1 xl:grid-cols-2 min-h-3/4;
  }

  .location-section {
    @apply relative w-full bg-center bg-cover bg-no-repeat py-20;
  }

  .location-section-v2 {
    @apply px-0 grid grid-cols-1 xl:grid-cols-2;
  }

  .location-section-overlay {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.9) 33.33%,
      rgba(255, 255, 255, 0) 61.65%
    );
    filter: blur(3.5999999046325684px);
  }

  /* RTL support for location section overlay */
  [dir="rtl"] .location-section-overlay {
    background: linear-gradient(
      270deg,
      rgba(255, 255, 255, 0.9) 33.33%,
      rgba(255, 255, 255, 0) 61.65%
    );
    filter: blur(3.5999999046325684px);
  }

  /* RTL support for location section overlay V2 */
  [dir="rtl"] .location-section-overlay-v2 {
    background: linear-gradient(
      270deg,
      rgba(255, 255, 255, 0.9) 33.33%,
      rgba(255, 255, 255, 0) 61.65%
    );
    filter: blur(3.5999999046325684px);
  }

  /* Ensure proper z-index stacking for location section */
  .location-section .triangle-button {
    position: relative;
    z-index: 40;
    isolation: isolate;
  }

  .location-section .triangle-button:hover {
    z-index: 50;
  }

  /* Ensure proper z-index stacking for location section V2 */
  .location-section-v2 .triangle-button {
    position: relative;
    z-index: 40;
    isolation: isolate;
  }

  .location-section-v2 .triangle-button:hover {
    z-index: 50;
  }

  /* Fix hover issues on small screens */
  @media (max-width: 768px) {
    .location-section .triangle-button {
      z-index: 50;
    }

    .location-section .triangle-button:hover {
      z-index: 60;
    }

    .location-section-v2 .triangle-button {
      z-index: 50;
    }

    .location-section-v2 .triangle-button:hover {
      z-index: 60;
    }
  }

  .faqs-section {
    @apply flex flex-col gap-[40px] bg-primary-anti_flash_white-main;
  }

  .instagram-section {
    @apply relative w-full;
  }

  .partners-section {
    @apply relative w-full;
  }
  .faqs-question-item {
    @apply bg-white border-[0.5px] border-primary-anti_flash_white-main px-4 py-0;
  }

  /* About Page Styles */
  /* ===== HERO ABOUT SECTION ===== */

  .hero-about-section {
    @apply p-0 bg-primary-anti_flash_white-main;
  }
  .hero-about-video-section {
    @apply absolute inset-0 w-full h-full object-cover z-10;
  }
  .hero-about-content-section {
    @apply relative pt-60 lg:pt-40 z-2 px-10 md:px-20 mx-auto gap-5 sm:gap-10 md:gap-20 flex flex-col lg:flex-row;
  }
  .hero-about-card-section {
    @apply gap-5 sm:gap-10 w-full rounded-none p-5 sm:p-10 shadow-none;
  }

  /* ===== OUR STRATEGY AND VALUES SECTION ===== */
  .our-strategy-and-values-section {
    @apply bg-primary-anti_flash_white-main flex flex-col gap-5 sm:gap-10;

    .our-strategy-and-values-cards {
      @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5  sm:gap-6;
    }
  }
}

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

.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);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-primary-rich_black-main;
  }

  html {
    font-size: 16px;
  }

  button,
  a,
  input,
  select,
  textarea {
    @apply touch-manipulation;
  }

  section {
    @apply py-10 px-5 sm:px-10 md:px-20 md:py-20;
  }

  *:focus-visible {
    @apply outline-2 outline-offset-2 outline-ring;
  }
}