globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  @apply scroll-smooth;
}

body {
  @apply bg-white min-h-screen;
}

::-webkit-scrollbar {
  width: 6px;
  height: 3px;
  border-radius: 50px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
  background: #363A3D;
}

.gradient {
  background: linear-gradient(to bottom, #7db9e8 0%, #00AD83A1 0%, #17B169A1 100%);
}

.main {
  width: 100vw;
  min-height: 100vh;
  position: fixed;
  display: flex;
  justify-content: center;
  padding: 120px 24px 160px 24px;
  pointer-events: none;
}

.main:before {
  background: radial-gradient(circle, rgba(2, 0, 36, 0) 0, #fafafa 100%);
  position: absolute;
  content: "";
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
}

.main:after {
  content: "";
  background-image: url("/images/grid.svg");
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0.4;
  filter: invert(1);
}

.main_gradient {
  height: fit-content;
  z-index: 3;
  width: 100%;
  max-width: 640px;
  background-image: radial-gradient(at 27% 37%,
      hsla(215, 98%, 61%, 1) 0px,
      transparent 0%),
    radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%),
    radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%),
    radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%),
    radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%),
    radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%),
    radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%);
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  filter: blur(100px) saturate(150%);
  top: 80px;
  opacity: 0.15;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

nav a {
  @apply relative transition-all duration-300;
}

nav a:hover {
  @apply text-green-600;
}

nav a::after {
  content: "";
  @apply absolute bottom-0 left-0 w-0 transition-all duration-500;
}

nav a:hover::after {
  @apply w-full h-0.5 bg-green-600;
}

nav a.active {
  @apply text-green-600;
}

nav a.active::after {
  @apply w-full h-0.5 bg-green-600;
}

.footer_social a {
  @apply text-gray-500;
}

.floating-nav {
  @apply bg-white rounded-lg border shadow-lg;
}

.advantage__card {
  @apply relative w-full min-h-[300px] bg-white rounded-lg px-6 py-5 laptop:px-5 laptop:py-6 space-y-8 laptop:space-y-10 overflow-hidden shadow-lg flex flex-col items-start justify-between;
}

.card_decoration {
  @apply absolute bottom-0 left-0 h-0 w-full bg-black transition-all duration-500;
}

.advantage__card:hover .card_decoration {
  @apply h-full;
}

.advantage__card:hover h3,
.advantage__card:hover p {
  @apply relative text-white z-10 transition-all duration-300;
}

.p {
  @apply text-base laptop:text-lg uppercase text-red-400;
}

.h1 {
  @apply laptop:text-5xl md:text-4xl sm:text-3xl text-2xl font-bold tracking-wider w-full text-center text-black
}

.section {
  @apply relative z-10 px-8 space-y-32;
}

.section1 {
  @apply relative overflow-hidden;
}

.shad_textArea {
  @apply placeholder:text-gray-500 focus-visible:ring-0 focus-visible:ring-offset-0 rounded-none laptop:text-xl !important;
}

.shad_input {
  @apply placeholder:text-gray-500 h-11 laptop:h-12 focus-visible:ring-0 focus-visible:ring-offset-0 rounded-none laptop:text-xl !important;
}

.main_animation {
  @apply size-[910px] laptop:size-[1010px] absolute -top-[250px] xl:-right-[210px] md:-right-[310px] -right-[410px] !important;
}

.main_video {
  @apply size-[800px] laptop:size-[900px] absolute -top-[250px] xl:-right-[300px] md:-right-[400px] -right-[500px] rounded-full -skew-y-[15deg] rotate-[20deg] overflow-hidden !important;
}



/**
 * THUMB
 */

.product__card__thumb {
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}

.product__card__thumb img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s;
  transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
}

.product__card:hover .product__card__thumb {
  height: 130px;
}

.product__card:hover .product__card__thumb img {
  opacity: 0.6;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

/**
 * BODY
 */

.product__card__body {
  position: relative;
  padding: 20px;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}

.product__card:hover .product__card__body {
  height: 250px;
}

.product__card__description {
  line-height: 27px;
  -webkit-transform: translateY(45px);
  transform: translateY(45px);
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.product__card:hover .product__card__description {
  opacity: 1;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}