/* ================================
   Global Styles
================================= */
:root {
  --background: #fdfdfc;
  --foreground: #1a1a1a;
  --primary: #D3B99C;
  --cream: #f5f0ea;
  --cream-dark: #6b6b6b;
  --card: #ffffff;
  --border: #e5e5e5;
  --secondary: #faf6f2;
  --muted-foreground: #999999;
}

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

body {
  background-color: black !important;
  color: var(--foreground);
  font-family: "Georgia", serif;
  line-height: 1.6;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Typography */
h1, h2, h3 {
  font-family: "Georgia", serif;
  font-weight: bold;
  /* color: #D3B99C; */
  color: white;
}

#scroll-indicator div{
    color: #D3B99C !important;
    border: 2px solid #D3B99C !important;
}
h1 { font-size: 4rem; line-height: 1.1; }
h2 { font-size: 3rem; }
h3 { font-size: 1.875rem; }

/* Utility spacing */
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-16 { margin-bottom: 4rem; }
.pt-8 { padding-top: 2rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }

/* Text colors */
.text-cream-dark { color: #a9a9ab; }
.text-cream { color: var(--cream); }
.text-muted-foreground { color: var(--muted-foreground); }

/* Backgrounds */
.bg-background { background: var(--background); }
.bg-primary { background: var(--primary); }
.bg-cream { background: var(--cream); }
.bg-card { background: var(--card); }
.bg-secondary { background: var(--secondary); }

/* Borders */
.border { border: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-border { border-color: var(--border); }

/* Layout */
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.relative { position: relative; }
.absolute { position: absolute; }
.text-center { text-align: center; }
.grid { display: grid; }
.gap-16 { gap: 4rem; }
.gap-8 { gap: 2rem; }
.lg\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.max-w-5xl { max-width: 72rem; margin: 0 auto; }

/* Rounded + Shadows */
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 0.5rem; }
.shadow-2xl { box-shadow: 0 20px 25px rgba(0,0,0,0.1); }

/* Transitions + Hover */
.group:hover .group-hover\\:scale-105 {
  transform: scale(1.05);
}
.group:hover .group-hover\\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\\:text-primary {
  color: var(--primary);
}
.group:hover .group-hover\\:scale-150 {
  transform: scale(1.5);
}
.transition { transition: all 0.3s ease; }

/* Indicators */
.animate-bounce {
  animation: bounce 1s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ================================
   Animations
================================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp 1s ease forwards; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in { animation: fadeIn 1s ease forwards; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up { animation: slideUp 0.8s ease forwards; }

/* ================================
   Sections
================================= */

.nav-bar{
    background-color: #1a1a1a;
    border: 1px solid #6b6b6b;
    position: fixed;
    z-index: 100;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    color: #D3B99C !important;
    padding: 1rem;
    border-radius: 2rem;
    margin-top: 2rem;
    justify-content: space-evenly;

    li{
        list-style: none;
    }
}

.btns{
    background-color: #1a1a1a;
    color: #D3B99C;
    border: 1px solid #999999;
    padding: 1rem;
    border-radius: 20px;
}

.nav-bar  a{
        color: #D3B99C !important;
        z-index: 100;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }


/* Hero */
#hero {
  overflow: hidden;
  position: relative;
}
#hero h1 { font-size: clamp(3rem, 8vw, 6rem); margin-top: -5rem; }
#hero p { font-size: 1.25rem; color: #D3B99C; }

/* About */
#about img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px rgba(0,0,0,0.1);
  transition: transform 0.5s ease;
}

#about p{
    color: #D3B99C;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
} 
#about .group:hover img {
  transform: scale(1.05);
}

.service-card {
  background: var(--card);
  border: 1px solid #333333;
  border-radius: 0.5rem;
  padding: 2rem;
  transition: all 0.5s ease;
}

.service-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.object-contain{
  object-fit: contain !important;
}


.service-card:hover h3 {
  color: #D3B99C; 
}

.service-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  transition: color 0.5s ease; /* smooth color change */
}

 .blob {
    position: absolute;
    width: 300px;
    height: 300px;
    background: #A17B63; /* brown color like your image */
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    transform: rotate(45deg);
  }

/* Footer */
footer {
  border-top: 1px solid var(--border);
  padding: 4rem 0;
  text-align: center;
  border-top: 1px solid #333333;
}

.border-ts{
    border-top: 1px solid #333333;
}

.bg-card{
    background-color: #1a1a1a;
}
footer a {
  color: #D3B99C;
  text-decoration: none;
  transition: color 0.3s ease;
}
footer a:hover {
  color: var(--primary);
}

p{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

.designs{
    display: block;
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* position: relative; */
    z-index: -100;
}