/* === OUR SERVICES CARDS === */
.our-services-card {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* === BUTTONS === */
.btn-outline-light {
  border: 2px solid #c8a96a;
  color: #c8a96a;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.3s ease;
  background: transparent;
}

.btn-outline-light:hover {
  background: linear-gradient(135deg, #c8a96a 0%, #b5835a 100%);
  color: #000;
  border-color: #c8a96a;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(200, 169, 106, 0.3);
}

/* === CONTACT CARDS - "LET'S CREATE TOGETHER" === */
.contact-creative-section {
  min-height: 70vh;
  padding-top: 7rem;
  padding-bottom: 7rem;
  background: var(--featured-gradient-end);
  position: relative;
}

.contact-card-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 3rem;
}

.contact-card {
  background: rgba(20, 20, 22, 0.95);
  border-radius: 2rem;
  border: 2px solid var(--card-accent, var(--brand-gradient-end));
  padding: 3rem 3rem 2rem 3rem;
  min-width: min(220px, calc(100vw - 4rem));
  max-width: min(260px, calc(100vw - 2rem));
  flex: 1 1 min(220px, calc(100vw - 4rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}

.contact-card:hover {
  transform: translateY(-8px) scale(1.04);
}

.contact-card-icon {
  font-size: clamp(4rem, 6vw, 6rem);
  color: var(--card-accent, var(--brand-gradient-end));
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 12px var(--card-accent, var(--brand-gradient-end)));
  transition: color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-card-icon i,
.contact-card-icon svg {
  width: 0.8em !important;
  height: 0.8em !important;
  stroke-width: 0.75;
}

.contact-card-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--card-accent, var(--brand-gradient-end));
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.contact-card-desc {
  font-size: var(--font-size-sm);
  color: #ccc;
  margin-bottom: 1.5rem;
  text-align: center;
  min-height: 48px;
}

.contact-card-desc-container {
  min-height: 90px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 1.5rem;
  width: 100%;
}

/* Contact card color variants */
.contact-card-email {
  --card-accent: #c8a96a;
}

.contact-card-telegram {
  --card-accent: #0088cc;
}

.contact-card-linkedin {
  --card-accent: #0077b5;
}

.contact-card-instagram {
  --card-accent: #e1306c;
}

.contact-card-whatsapp {
  --card-accent: #25d366;
}

.contact-card-facebook {
  --card-accent: #1877f2;
}

.contact-card-btn {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: 1.5rem;
  background: var(--card-accent, var(--brand-gradient-end));
  color: #111;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.05rem;
  border: none;
  transition: background 0.3s, color 0.3s;
}

.contact-card-btn:hover {
  background: #fff;
  color: var(--card-accent, var(--brand-gradient-end));
}

/* === SERVICE CARD TYPOGRAPHY === */
#services .service-card h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: #ffd166;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  letter-spacing: -0.01em;
  -webkit-transition: color 0s;
  transition: color 0s;
}

#services .service-card p {
  font-size: clamp(0.75rem, 1.8vw, 0.875rem);
  font-weight: 300;
  color: #c8a96a;
  line-height: 1.6;
  margin: 0;
  opacity: 0.9;
  -webkit-transition: color 0s;
  transition: color 0s;
}

/* Service card description text */
.service-card-desc {
  color: #c8a96a;
  opacity: 0.9;
  -webkit-transition: color 0s;
  transition: color 0s;
}

/* === PORTFOLIO CARD TYPOGRAPHY === */
#works .card-custom small {
  font-size: clamp(0.7rem, 1.5vw, 0.8rem);
  color: rgba(255, 179, 71, 0.7);
  opacity: 0.8;
  font-weight: 500;
}

#works .card-custom h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.75rem;
  margin-top: 0;
  letter-spacing: -0.01em;
}

#works .card-custom p {
  font-size: clamp(0.75rem, 1.8vw, 0.875rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.6;
  opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .contact-card-row {
    gap: 1.5rem;
  }
  .contact-card {
    min-width: 180px;
    max-width: 100%;
    padding: 2rem 1rem 1.5rem 1rem;
  }
}

@media (max-width: 600px) {
  .contact-creative-section {
    min-height: 50vh;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .contact-card-row {
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    max-width: 100%;
    overflow-x: hidden;
  }
  .contact-card {
    min-width: calc(100% - 2rem) !important;
    max-width: calc(100% - 2rem) !important;
    width: calc(100% - 2rem) !important;
    padding: 1.5rem 1rem 1rem 1rem;
    flex: none;
  }
}

/* === BUTTON STYLES FOR "LET'S CREATE TOGETHER" === */
.contact-buttons a {
  display: inline-block;
  margin: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--brand-btn-border);
  border-radius: 12px;
  color: var(--brand-btn-bg);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  background: transparent;
}

.contact-buttons a:hover {
  background: var(--brand-btn-hover-bg);
  color: var(--brand-btn-hover-text);
  cursor: pointer;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 40px;
  font-weight: 600;
  text-decoration: none;
  background-color: var(--brand-btn-bg);
  color: var(--brand-btn-text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* === TILT CARD === */
.tilt-card {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  /* Allow AOS opacity transitions but disable transform transitions to let VanillaTilt work */
  transition: opacity 0.6s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  will-change: transform;
  /* Let VanillaTilt handle all transform animations */
  transform-style: preserve-3d;
  /* Optimize for better 3D performance */  
  backface-visibility: hidden;
  /* Ensure hardware acceleration for smooth perspective changes */
  transform: translate3d(0, 0, 0);
  /* Default z-index for normal state */
  z-index: 1;
  position: relative;
}

.tilt-card:hover {
  /* Only animate properties that don't interfere with VanillaTilt transforms */
  box-shadow: 0 0 30px var(--card-glow-color, transparent);
  cursor: pointer;
  /* Add a separate transition only for box-shadow */
  transition: box-shadow 0.3s ease !important;
  /* Very high z-index to ensure it's above all other cards */
  z-index: 999999 !important;
}

/* === IMAGES === */
img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}

/* === ASTROLABE ICON === */
.astrolabe-icon-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.astrolabe-icon-img {
  width: var(--astrolabe-icon-size);
  max-width: 100%;   
  height: auto;
  margin-top: var(--astrolabe-icon-margin-top);
  margin-bottom: var(--astrolabe-icon-margin-bottom);
  margin-left: auto;
  margin-right: auto;
  display: block;
  transition: width 0.2s, max-width 0.2s;
}

/* === FEATURED WORKS - SERVICE LINKS === */
/* Service tags container - allows natural height expansion */
.featured-works .portfolio-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 1rem;
  align-content: flex-start;
}

/* Style links inside small tags in featured works section */
.featured-works small a {
  font-size: 0.9375rem !important; /* Slightly larger than default small */
  color: #adb5bd !important;
  text-decoration: none !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  position: relative !important;
  transition: color 0.3s ease !important;
}

.featured-works small a:link,
.featured-works small a:visited {
  color: #adb5bd !important;
  text-decoration: none !important;
}

.featured-works small a:hover {
  color: #c8a96a !important;
  text-decoration: none !important;
}

/* Animated golden underline on hover */
.featured-works small a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 0 !important;
  height: 1px !important;
  background-color: #c8a96a !important;
  transition: width 0.3s ease !important;
}

.featured-works small a:hover::after {
  width: 100% !important;
}

/* === SERVICE CARD HIGHLIGHT ANIMATION === */
/* Darker golden gradient background effect when scrolling to a service card from portfolio link */

/* Webkit keyframes for Safari support */
@-webkit-keyframes serviceCardHighlight {
  0% {
    background: rgba(255, 255, 255, 0.05);
  }
  20%, 70% {
    background: linear-gradient(135deg, #8b7355 0%, #6b5444 100%);
  }
  100% {
    background: rgba(255, 255, 255, 0.05);
  }
}

@keyframes serviceCardHighlight {
  0% {
    background: rgba(255, 255, 255, 0.05);
  }
  20%, 70% {
    background: linear-gradient(135deg, #8b7355 0%, #6b5444 100%);
  }
  100% {
    background: rgba(255, 255, 255, 0.05);
  }
}

/* Only animate background - text and image stay as-is */
.service-card-highlighted .service-card {
  -webkit-animation: serviceCardHighlight 1s ease-in-out;
  animation: serviceCardHighlight 1s ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  transition: none !important;
}

/* === PORTFOLIO SERVICE TAGS === */
/* Container for service tags */
.portfolio-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 1rem;
  align-content: flex-start;
}

/* Tag/pill style - link wraps the small tag */
#works .card-custom .service-link {
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
}

#works .card-custom .service-link small {
  font-size: clamp(0.7rem, 1.5vw, 0.8rem) !important;
  color: darkgrey !important;
  opacity: 0.8;
  font-weight: 500;
  border: solid darkgrey 1px !important;
  border-radius: 40px !important;
  width: fit-content;
  text-align: center;
  padding: 7px 10px 7px 10px !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

#works .card-custom .service-link:hover small {
  opacity: 1 !important;
  background: linear-gradient(135deg, #c8a96a 0%, #b5835a 100%) !important;
  border-color: #c8a96a !important;
  color: #000 !important;
  cursor: pointer !important;
}