:root {
  --primary-color: #d8979c;      /* Soft pink for buttons, highlights */
  --primary-hover: #c97c85;      /* Deeper pink on hover */
  --secondary-color: #c49090;    /* Accent / subtle highlights */
  --light-bg: #ffeef8;           /* Original soft background */
  --light-bg-2: #fff5f0;         /* Secondary gradient background */
  --text-dark: #333;             /* Soft readable dark text */
  --text-light: #666;            /* Muted text */
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
  background-color: var(--light-bg);
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  color: var(--text-dark);
}

.btn-primary {
  background-color: var(--primary-color);
  border: none;
}

.btn-primary:hover {
  background-color: var(--primary-hover);
}

.section {
  padding: 80px 0;
}

.hero {
  background: linear-gradient(to bottom, var(--light-bg), var(--light-bg-2));
}

.card {
  border: none;
  border-radius: 20px;
}

.card img {
  border-radius: 20px;
}

.text-muted {
  color: var(--text-light) !important;
}

.navbar-brand {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  color: var(--primary-color);
}

.navbar-brand span {
  color: var(--primary-color);
  font-weight: 500;
}

.navbar-brand:focus, .navbar-brand:hover {
  color: var(--primary-hover)
}

/* Optional: section titles in primary color for accent */
#portfolio h2,
#gallery h2,
#about h2,
#contact h2 {
  color: var(--primary-color);
}

 /* Card gradient and hover effect */
.contact-card {
  background: linear-gradient(145deg, var(--light-bg), var(--light-bg-2));
  transition: transform 0.3s, box-shadow 0.3s;
}
.contact-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Icon style */
.contact-icon {
  font-size: 2.5rem;
  color: var(--primary-color);
  transition: color 0.3s;
}
.contact-card:hover .contact-icon {
  color: var(--primary-hover);
}

/* Button style */
.contact-card .btn-primary {
  background-color: var(--primary-color);
  border: none;
  transition: background-color 0.3s;
}
.contact-card .btn-primary:hover {
  background-color: var(--primary-hover);
}

/* Responsive icons */
@media (max-width: 576px) {
  .contact-icon {
    font-size: 3rem;
  }
}

.video-caption {
    font-size: 0.8rem;
    font-weight: 500;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    position: relative;
    padding-left: 24px;
    padding-right: 24px;
}

.video-caption::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, #e8b4c8, #ffd6e8);
}

.video-caption::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, #ffd6e8, #e8b4c8);
}