/* =================================================================
   Modern Minimal + Hyper-realistic Textures Theme
   Tailwind CSS friendly – only complementary utilities
   ================================================================= */

:root {
  /* ===== Color System (Analogous) ===== */
  --color-primary: #00b3b3;          /* vivid cyan-teal */
  --color-primary-dark: #009999;
  --color-secondary: #008c8c;        /* deep teal */
  --color-accent: #00d4d4;           /* bright aqua highlight */
  --color-bg-light: #e0f5f2;         /* very light aqua */
  --color-bg-medium: #c8ede8;        /* light aqua */
  --color-bg-deep: #b0e3dd;          /* desaturated teal */
  --color-text: #222222;
  --color-text-light: #ffffff;
  --color-muted: #666666;

  /* ===== Gradients & Effects ===== */
  --gradient-main: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-dark: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary-dark) 100%);

  /* ===== Shadows ===== */
  --shadow-soft: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-card: 0 12px 24px rgba(0,0,0,0.12);
  --shadow-glass: 0 8px 20px rgba(255,255,255,0.15);

  /* ===== Glassmorphism ===== */
  --glass-bg: rgba(255,255,255,0.15);
  --glass-filter: saturate(180%) blur(20px);

  /* ===== Typography ===== */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* ===== Animation Timings ===== */
  --easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-short: 0.25s;
  --duration-medium: 0.6s;
}

/* =================================================================
   Base
   ================================================================= */

html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg-light);
  line-height: 1.6;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

/* Paragraphs & muted */
p { margin-bottom: 1.25rem; }
.text-muted { color: var(--color-muted); }

/* Links */
a {
  color: var(--color-primary);
  transition: color var(--duration-short) var(--easing);
}
a:hover { color: var(--color-primary-dark); }

/* “Read More” link */
.read-more {
  display: inline-block;
  font-weight: 500;
  position: relative;
  padding-right: 1.6rem;
}
.read-more::after {
  content: '→';
  position: absolute;
  right: 0;
  transition: transform var(--duration-short) var(--easing);
}
.read-more:hover::after { transform: translateX(4px); }

/* =================================================================
   Buttons – Global
   ================================================================= */

.btn,
button,
input[type="submit"] {
  appearance: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  border: none;
  color: var(--color-text-light);
  background: var(--gradient-main);
  box-shadow: var(--shadow-soft);
  transition: transform var(--duration-short) var(--easing), box-shadow var(--duration-short) var(--easing);
}
.btn:hover,
button:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.btn:active,
button:active,
input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: var(--shadow-soft);
}

/* =================================================================
   Layout Helpers
   ================================================================= */

.section {
  width: 100%;
  padding: 4rem 1.25rem;
}
.section-tight { padding: 2.5rem 1.25rem; }
.section-bg-light  { background-color: var(--color-bg-light); }
.section-bg-medium { background-color: var(--color-bg-medium); }
.section-bg-deep   { background-color: var(--color-bg-deep); }

.is-centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Success Page */
.page-success {
  min-height: 100vh;
  text-align: center;
}

/* For privacy & terms to avoid header overlap */
.page-legal { padding-top: 100px; }

/* =================================================================
   Navigation
   ================================================================= */

.nav-fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  backdrop-filter: blur(12px);
  background-color: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  box-shadow: var(--shadow-soft);
}

/* Burger lines use Tailwind utilities, no extra styles needed */

/* =================================================================
   Hero
   ================================================================= */

.hero {
  position: relative;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: var(--color-text-light);
}
.hero::before {
  /* dark overlay for readability */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 80%);
  z-index: 0;
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 60rem;
  margin: 0 auto;
  padding: 6rem 1.25rem;
  text-align: center;
}
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); margin-bottom: 1rem; }
.hero p  { font-size: clamp(1.125rem, 2vw, 1.5rem); margin-bottom: 2rem; }

/* =================================================================
   Cards & Items
   ================================================================= */

.card,
.item,
.testimonial,
.team-member,
.product-card {
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--duration-medium) var(--easing), box-shadow var(--duration-short);
}
.card:hover,
.item:hover,
.testimonial:hover,
.team-member:hover,
.product-card:hover {
  transform: translateY(-6px) rotateY(3deg); /* subtle 3D tilt */
  box-shadow: var(--shadow-card);
}

/* Image container inside cards */
.card-image,
.item-image,
.profile-image {
  width: 100%;
  height: 240px;             /* fixed height */
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-image img,
.item-image img,
.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 auto;
}

/* =================================================================
   Gallery & Media Grid
   ================================================================= */

.gallery-grid,
.media-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .gallery-grid,
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* =================================================================
   Process Steps
   ================================================================= */

.process-grid {
  display: grid;
  gap: 2rem;
  text-align: center;
}
@media (min-width: 768px) { .process-grid { grid-template-columns: repeat(4,1fr); } }
.process-step {
  color: var(--color-text-light);
}
.process-number {
  font-family: var(--font-heading);
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

/* =================================================================
   Parallax Backgrounds
   ================================================================= */

.parallax {
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

/* =================================================================
   3D Animations
   ================================================================= */

@keyframes tilt-in {
  0%   { transform: perspective(800px) rotateX(10deg) translateY(30px); opacity: 0; }
  100% { transform: perspective(800px) rotateX(0)     translateY(0);  opacity: 1; }
}
.animate-tilt-in { animation: tilt-in var(--duration-medium) var(--easing) both; }

/* =================================================================
   Glassmorphism Utility
   ================================================================= */

.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border-radius: 1rem;
  box-shadow: var(--shadow-glass);
}

/* =================================================================
   Hyper-realistic Texture Overlay
   ================================================================= */

.bg-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('image/noise-texture.jpg'); /* description: subtle noise grain texture, 1200x800 jpg */
  opacity: 0.08;
  pointer-events: none;
}

/* =================================================================
   Footer
   ================================================================= */

.footer {
  background-color: var(--color-secondary);
  color: var(--color-text-light);
  padding: 3rem 1.25rem;
}
.footer-nav a {
  color: var(--color-text-light);
  font-weight: 500;
}
.footer-nav a:hover { color: var(--color-accent); }

/* Social links (text-based) */
.social-link {
  color: var(--color-text-light);
  margin-right: 0.75rem;
  font-weight: 500;
  position: relative;
}
.social-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background-color: var(--color-accent);
  transition: width var(--duration-short) var(--easing);
}
.social-link:hover::after { width: 100%; }

/* =================================================================
   Contact Form
   ================================================================= */

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-bg-medium);
  border-radius: 0.5rem;
  background-color: #ffffff;
  transition: border-color var(--duration-short) var(--easing), box-shadow var(--duration-short);
}
.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,179,179,0.15);
  outline: none;
}

/* =================================================================
   Utility – Fixed Heights for Cards (override Tailwind if needed)
   ================================================================= */

.h-card-240 { height: 240px; }
.h-card-320 { height: 320px; }

/* =================================================================
   Tailwind Overrides /
   Additional Helpers
   ================================================================= */

/* Ensure images never overflow cards or shift */
.card img,
.item img,
.testimonial img,
.team-member img,
.product-card img {
  display: block;
}

/* Ensure text contrasts on colored backgrounds (usage via Tailwind class combinations) */
.text-on-primary   { color: var(--color-text-light); }
.text-on-secondary { color: var(--color-text-light); }
.text-on-deep      { color: var(--color-text-light); }

/* ================================================================
   End of stylesheet
   ================================================================ */