/* ===================== Hero Section - Exact same as home.css ===================== */

.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  text-align: center;
  margin-top: 70px;
  background: url('../assets/home_page.png') center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-color: #000000;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-content {
  max-width: 800px;
  padding: 0 20px;
  z-index: 1;
  animation: fadeInUp 1s ease;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--accent);
}

.hero-subtitle {
  font-size: 1.3rem;
  margin-bottom: 30px;
  color: var(--accent);
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 12px 30px;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 4px;
  transition: all 0.3s ease;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--gold);
  color: var(--primary);
  border: 2px solid var(--gold);
}

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

.btn-secondary {
  background-color: transparent;
  color: var(--accent);
  border: 2px solid var(--gold);
}

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

/* Responsive Hero Titles/Buttons */
@media (max-width: 1200px) { .hero-title { font-size: 3.5rem;} }
@media (max-width: 992px) {
  .hero-title {font-size: 2.8rem;}
  .hero-subtitle {font-size: 1.1rem;}
}
@media (max-width: 768px) {
  .hero {margin-top: 70px !important; height: calc(100vw * 0.75) !important; min-height: calc(100vw * 0.75) !important; max-height: calc(100vh - 70px) !important; background-position: center top !important; background-size: contain !important; background-attachment: scroll !important; background-color: #000000; padding: 0 !important; overflow: visible !important; position: relative !important;}
  .hero-content {max-width: 90%; margin: 0 auto; padding-top: 8px !important; padding-bottom: 3px !important; padding: 0 15px; transform: none;}
  .hero-title {font-size: 1.2rem !important; margin-bottom: 6px !important; line-height: 1.2;}
  .hero-subtitle {font-size: 0.7rem !important; margin-bottom: 10px !important; line-height: 1.3;}
  .hero-buttons {flex-direction: column; gap: 6px !important; width: 100%; max-width: 200px !important; margin: 0 auto;}
  .hero-buttons .btn {width: 100%; padding: 8px 14px !important; font-size: 0.7rem !important;}
}
@media (max-width: 576px) {
  .hero-title {font-size: 1.8rem;}
}

@media (max-width: 480px) {
  .hero {margin-top: 70px !important; height: calc(100vw * 0.75) !important; min-height: calc(100vw * 0.75) !important; max-height: calc(100vh - 70px) !important; background-size: contain !important; background-position: center top !important; background-attachment: scroll !important; background-color: #000000; padding: 0 !important; overflow: visible !important; position: relative !important;}
  .hero-content {padding-top: 6px !important; padding-bottom: 2px !important;}
  .hero-title {font-size: 1rem !important; margin-bottom: 5px !important;}
  .hero-subtitle {font-size: 0.65rem !important; margin-bottom: 8px !important;}
  .hero-buttons {max-width: 180px !important; gap: 5px !important;}
  .hero-buttons .btn {padding: 7px 12px !important; font-size: 0.65rem !important;}
}

/* =============== Services Showcase =============== */
.services-showcase {padding: 120px 0;background-color: #111111;position: relative;}
.services-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../assets/texture.png') center/cover;
  opacity: 0.03;
  pointer-events: none;
}
.section-header {text-align: center;margin-bottom: 60px;}
.section-label {display: inline-block;color: var(--gold);font-size: 0.9rem;letter-spacing: 2px;text-transform: uppercase;margin-bottom: 15px;}
.section-title {font-size: 3rem;margin-bottom: 15px;color: var(--accent);}
.section-subtitle {font-size: 1.2rem;color: var(--secondary);max-width: 600px;margin: 0 auto;}
.services-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 30px;}
.service-card {background-color: #1a1a1a;border-radius: 8px;overflow: hidden;transition: all 0.3s ease;position: relative;border: 1px solid rgba(212, 175, 55, 0.1);}
.service-card:hover {transform: translateY(-10px);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);border-color: var(--gold);}
.service-image {height: 250px;overflow: hidden;}
.service-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease;}
.service-card:hover .service-image img {transform: scale(1.1);}
.service-content {padding: 30px;position: relative;}
.service-content::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 4px;background-color: var(--gold);transform: scaleX(0);transform-origin: left;transition: transform 0.3s ease;}
.service-card:hover .service-content::before {transform: scaleX(1);}
.service-title {font-size: 1.5rem;margin-bottom: 15px;color: var(--accent);}
.service-description {color: var(--secondary);line-height: 1.8;margin-bottom: 20px;}
.service-link {display: inline-flex;align-items: center;color: var(--gold);font-weight: 600;text-decoration: none;transition: all 0.3s ease;}
.service-link i {margin-left: 8px;transition: transform 0.3s ease;}
.service-link:hover {color: var(--accent);}
.service-link:hover i {transform: translateX(5px);}

/* =============== Service Features =============== */
.service-features {padding: 100px 0;background-color: var(--primary);}
.features-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 30px;}
.feature-card {background-color: #111111;border-radius: 8px;padding: 40px 30px;text-align: center;transition: all 0.3s ease;border: 1px solid rgba(212, 175, 55, 0.1);}
.feature-card:hover {transform: translateY(-10px);box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);border-color: var(--gold);}
.feature-icon {width: 80px;height: 80px;background-color: rgba(212, 175, 55, 0.1);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 25px;color: var(--gold);font-size: 2rem;transition: all 0.3s ease;}
.feature-card:hover .feature-icon {background-color: var(--gold);color: var(--primary);transform: rotate(15deg);}
.feature-card h3 {font-size: 1.4rem;margin-bottom: 15px;color: var(--accent);}
.feature-card p {color: var(--secondary);line-height: 1.8;}

/* =============== Process Section =============== */
.process-section {padding: 120px 0;background-color: #111111;position: relative;}
.process-section::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('../assets/diagonal-lines.png') center/cover;opacity: 0.03;pointer-events: none;}
.process-steps {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 30px;max-width: 1200px;margin: 0 auto;}
.process-item {background-color: #1a1a1a;border-radius: 8px;padding: 40px 30px;position: relative;overflow: hidden;transition: all 0.3s ease;border: 1px solid rgba(212, 175, 55, 0.1);}
.process-item:hover {transform: translateY(-10px);box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);border-color: var(--gold);}
.step-number {font-size: 2.5rem;font-weight: 700;color: rgba(212, 175, 55, 0.1);margin-bottom: 20px;line-height: 1;}
.step-content h3 {font-size: 1.5rem;margin-bottom: 15px;color: var(--accent);}
.step-content p {color: var(--secondary);line-height: 1.8;}

/* =============== CTA Section =============== */
.service-cta {padding: 120px 0;background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url('../assets/services-cta-bg.jpg') center/cover no-repeat;position: relative;}
.service-cta::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, transparent 100%);}
.cta-card {max-width: 800px;margin: 0 auto;text-align: center;position: relative;z-index: 1;padding: 60px;background-color: rgba(17, 17, 17, 0.8);border: 1px solid rgba(212, 175, 55, 0.3);backdrop-filter: blur(5px);}
.cta-card h2 {font-size: 2.5rem;margin-bottom: 20px;color: var(--accent);}
.cta-card p {font-size: 1.2rem;color: var(--secondary);margin-bottom: 40px;max-width: 600px;margin-left: auto;margin-right: auto;}
.cta-buttons {display: flex;justify-content: center;gap: 20px;flex-wrap: wrap;}
.btn-outline {background-color: transparent;color: var(--accent);border: 2px solid var(--gold);}
.btn-outline:hover {background-color: var(--gold);color: var(--primary);}
@media (max-width: 576px) { .cta-buttons {flex-direction: column; gap: 15px;} .btn-large, .btn-outline {width: 100%;}}

/* =============== Animations =============== */
@keyframes fadeInUp {from {opacity: 0;transform: translateY(20px);}to {opacity: 1;transform: translateY(0);}}

/* =============== Service Modal (Scrollable for Overflow!) =============== */

.service-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  overflow: auto;
  min-height: 100vh;
}
.service-modal.active {
  opacity: 1;
  visibility: visible;
}
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.8);
  z-index: 1;
}
.modal-content {
  position: relative; z-index: 2; background: #1a1a1a;
  border: 1px solid var(--gold); border-radius: 12px;
  width: min(1000px,92vw); max-height: 92vh; overflow-y: auto;
  transform-origin: top center; box-shadow: 0 20px 50px rgba(0,0,0,.5);
  transition: transform .25s ease; margin-bottom: 16px; padding: 0;
  display: flex; flex-direction: column;
}
.modal-close {position: absolute;top: 16px;right: 16px;z-index: 3;background: none;border: 0;color: var(--accent);font-size: 2rem;cursor: pointer;transition: color .2s ease;}
.modal-close:hover{ color: var(--gold);}
.modal-body {display: flex; flex-direction: column; gap: 24px; padding: 36px; flex: 1 1 auto; overflow: visible;}
.modal-image-container {width: 100%;height: clamp(180px,28vh,300px);overflow: hidden;border-radius: 10px;margin: 0;}
.modal-image {width: 100%;height: 100%;object-fit: cover;object-position: center;display: block;}
.modal-text-content{ color: var(--secondary); }
.modal-title {font-size: 2rem;color: var(--accent);margin: 0 0 14px;}
.modal-description {line-height: 1.75;margin: 0 0 22px;font-size: 1.06rem;}
.modal-benefits h3 {color: var(--accent);font-size: 1.35rem;margin: 18px 0 10px;}
.benefits-list {margin: 0 0 20px; padding-left: 22px;}
.benefits-list li {margin: 8px 0;line-height: 1.6;position: relative;}
.benefits-list li::before {content: "";position: absolute;left: -18px;top: .7em;width: 8px; height: 8px;border-radius: 50%;background: var(--gold);}
.modal-details {display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 18px;}
.detail-item {display: flex; align-items: center; gap: 10px; font-size: 1.05rem; transition: opacity .2s ease;}
.detail-item i {color: var(--gold);}
.detail-label {font-weight: 700;color: var(--accent);}
.modal-contact-btn {align-self: flex-start;}
@media (min-width: 992px) {
  .modal-body {display: grid;grid-template-columns: minmax(340px,42%) 1fr;align-items: stretch;gap: 28px;padding: 36px;}
  .modal-image-container {height: 100%;min-height: 100%;border-radius: 12px;overflow: hidden;margin: 0;}
  .modal-text-content {width: auto;min-width: 0;}
}

/* Modal scaling for short viewports (as before) */
.service-modal.modal--scaled .modal-title{ font-size: clamp(1.35rem, 2.8vh, 1.7rem);}
.service-modal.modal--scaled .modal-description{ font-size: .98rem;}
.service-modal.modal--scaled .detail-item{ font-size: .95rem;}
.service-modal.modal--scaled .modal-body{ padding: 26px; gap: 18px;}
@media (max-height: 820px){ .modal-content{ transform: scale(.92); } }
@media (max-height: 740px){ .modal-content{ transform: scale(.86); } }
@media (max-height: 680px){ .modal-content{ transform: scale(.80); } }

@media (max-width: 768px) {
  .service-modal {align-items: center !important;justify-content: center !important;padding: 0 10px;}
  .modal-content {width: 100%;max-width: 95vw;margin: 0 !important;top: auto !important;transform: none !important;box-sizing: border-box;border-radius: 14px;padding: 0;max-height: 90vh;overflow-y: auto;}
  .modal-body {padding: 22px 12px;gap: 18px;flex: 1 1 auto;overflow: visible;}
  .modal-image-container {height: 140px;border-radius: 8px;margin-bottom: 10px;}
  .modal-title {font-size: 1.4rem;margin-bottom: 10px;}
  
  /* Service card images on mobile */
  .service-image {
    height: 200px;
    overflow: hidden;
  }
  
  .service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  .modal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}
@media (max-width: 480px) {
  .modal-content {padding: 0;max-width: 98vw;}
  .modal-body {padding: 13px 5px;gap: 12px;}
  .modal-title {font-size: 1.1rem;margin-bottom: 7px;}
}

/* Always keep spacing at bottom for scrolling */
.service-modal { overflow: auto; min-height: 100vh;}
.modal-content { margin-bottom: 16px;}