/* ============================================
   TIGA KARUNIA JAYA - GLOBAL REDESIGN
   Apply to all pages (static pages, service pages, etc.)
   Brand Colors: Maroon (#B80F0A) & Gold (#D4A017)
   ============================================ */

/* Typography - Apply globally */
body {
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.section-title-main,
.page-title {
  font-family: 'Montserrat', 'Poppins', sans-serif;
  font-weight: 700;
}

/* Replace all blue colors with maroon globally */
.text-primary,
.text-primary-color {
  color: #B80F0A !important;
}

.btn-primary,
.btn-primary-color {
  background: #B80F0A !important;
  border-color: #B80F0A !important;
  color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary-color:hover {
  background: #8C0C08 !important;
  border-color: #8C0C08 !important;
  color: #FFFFFF !important;
}

.btn-outline-primary {
  border-color: #B80F0A !important;
  color: #B80F0A !important;
}

.btn-outline-primary:hover {
  background: #B80F0A !important;
  border-color: #B80F0A !important;
  color: #FFFFFF !important;
}

/* Hero Section - Global Style */
.hero-section {
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed;
  color: white !important;
  padding: 100px 0;
  position: relative !important;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: center;
}

.hero-section::before {
  display: none; /* Removed to prevent double overlay */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75) !important; /* 75% black overlay - same as footer */
  z-index: 1;
}

.hero-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  color: white !important;
}

.hero-content * {
  color: white !important;
  position: relative;
  z-index: 3;
}

.hero-title {
  font-family: 'Montserrat', 'Poppins', sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: #D4A017 !important; /* Gold color for branding */
  text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
  text-align: center;
  position: relative;
  z-index: 3;
}

.hero-subtitle {
  color: rgba(255,255,255,0.9) !important;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
  text-align: center;
  position: relative;
  z-index: 3;
}

.hero-section .container {
  position: relative;
  z-index: 2;
}

.hero-section p,
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section h4,
.hero-section h5,
.hero-section h6 {
  color: white !important;
  position: relative;
  z-index: 3;
}

.hero-section a,
.hero-section .btn {
  position: relative;
  z-index: 3;
}

/* Buttons - Global Style */
.btn-primary,
.btn-hero-primary,
.cta-button {
  background: #B80F0A;
  color: #FFFFFF;
  border: none;
  transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-hero-primary:hover,
.cta-button:hover {
  background: #8C0C08;
  color: #FFFFFF;
}

.btn-outline-primary,
.btn-hero-outline {
  border: 2px solid;
  background: transparent;
  transition: all 0.3s ease;
}

/* Icons - Gold Color */
i.fas,
i.far,
i.fab {
  color: #D4A017;
}

.text-primary i,
.keunggulan-item i,
.fasilitas-list li i {
  color: #D4A017 !important;
}

/* Section Titles */
.section-title,
.section-title-main,
.page-title {
  color: #B80F0A;
  font-family: 'Montserrat', 'Poppins', sans-serif;
  font-weight: 700;
  margin-bottom: 15px; /* Reduced spacing */
  padding-bottom: 8px; /* Reduced padding for underline */
  position: relative;
}

.section-title-main::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #B80F0A, #D4A017);
  border-radius: 2px;
}

/* Cards with Gold Icons */
.card-icon,
.produk-icon,
.fasilitas-icon,
.legalitas-icon,
.about-icon,
.service-icon,
.product-icon {
  background: linear-gradient(135deg, #D4A017, #B88A12) !important;
  color: #FFFFFF !important; /* White icon inside gold circle */
}

.card-icon i,
.produk-icon i,
.fasilitas-icon i,
.legalitas-icon i,
.about-icon i,
.service-icon i,
.product-icon i {
  color: #FFFFFF !important; /* White icon inside gold circle */
}

/* Links */
a {
  color: #B80F0A;
  transition: color 0.3s ease;
}

a:hover {
  color: #8C0C08;
}

/* Badges */
.badge,
.feature-badge {
  border-color: #B80F0A;
  color: #B80F0A;
}

.feature-badge i {
  color: #D4A017;
}

/* Mobile Responsive - Global */
@media (max-width: 768px) {
  .hero-section {
    padding: 60px 15px !important;
    background-attachment: scroll;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 500px !important;
  }
  
  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75) !important; /* 75% black overlay - same as desktop */
    z-index: 1;
  }
  
  .hero-content {
    position: relative;
    z-index: 2;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  .hero-content .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 15px !important;
  }
  
  .hero-title {
    font-size: 28px !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  
  .hero-subtitle {
    font-size: 16px !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  
  .hero-buttons {
    flex-direction: row !important;
    gap: 10px;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  
  .btn-hero-primary,
  .btn-hero-outline {
    flex: 1 !important;
    max-width: calc(50% - 5px) !important;
    padding: 12px 15px !important;
    font-size: 0.9rem !important;
    width: auto !important;
  }
  
  /* Section titles mobile spacing */
  .section-title-main,
  .section-title,
  .page-title {
    margin-bottom: 12px !important; /* Reduced spacing for mobile */
    padding-bottom: 6px !important; /* Reduced padding for mobile */
  }
}

@media (max-width: 480px) {
  .hero-section {
    min-height: 450px !important;
    padding: 50px 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  .hero-content .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0 15px !important;
  }
  
  .hero-title {
    font-size: 24px !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  
  .hero-subtitle {
    font-size: 15px !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  
  .hero-buttons {
    flex-direction: row !important;
    gap: 8px;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
  
  .btn-hero-primary,
  .btn-hero-outline {
    flex: 1 !important;
    max-width: calc(50% - 4px) !important;
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
    width: auto !important;
  }
}