/* Variables Tema MAS Sesuai Logo */
:root {
  --primary-color: #08475a;           /* Biru gelap utama seperti kabel dan tulisan MAS */
  --primary-color-gradient-start: #0f5c6c; /* Gradien biru gelap terang */
  --primary-color-gradient-end: #042c38;   /* Gradien biru gelap gelap */

  --secondary-color-start: #ff6200;  /* Oranye nyala dari api */
  --secondary-color-end: #ff8400;    /* Oranye cerah untuk gradien api */

  --background-color: #ffffff;       /* Putih sebagai background utama */
  --background-secondary-color: #f9f9f9;

  --text-color-primary: #08475a;     /* Teks biru gelap */
  --text-color-secondary: #555555;
}

/* Gradien biru gelap untuk elemen utama */
.bg-primary-gradient {
  background: linear-gradient(135deg, var(--primary-color-gradient-start), var(--primary-color-gradient-end));
  color: white;
}

/* Header dan footer background biru gelap */
.header, .footer {
  background-color: var(--primary-color);
  color: white;
}

/* Footer link dan icon sosmed */
.footer-widget .links li a,
.footer .socials i {
  color: white;
  transition: color 0.3s ease;
}

.footer-widget .links li a:hover,
.footer .socials i:hover {
  color: var(--secondary-color-start);
}

/* Tombol utama menggunakan gradasi oranye */
.button, .button-lg, .button-sm {
  background: linear-gradient(45deg, var(--secondary-color-start), var(--secondary-color-end));
  color: white;
  border-radius: 10px;
  transition: background 0.3s ease;
  border: none;
  box-shadow: 0 4px 15px rgba(255, 130, 0, 0.4);
}

.button:hover, .button-lg:hover, .button-sm:hover {
  background: linear-gradient(45deg, #e65d00, #ff7200);
  color: white;
  box-shadow: 0 6px 20px rgba(255, 132, 0, 0.6);
}

/* Badge populer oranye */
.popular-badge {
  background: linear-gradient(45deg, var(--secondary-color-start), var(--secondary-color-end));
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  padding: 5px 15px;
  border-radius: 30px;
}

/* Background section hero */
.hero-section-wrapper-2, .hero-section {
  background-color: var(--background-color);
  color: var(--text-color-primary);
}

/* Background fitur dan pricing */
.feature-section, .pricing-section {
  background-color: var(--background-secondary-color);
}

/* Teks umum */
body, p, h1, h2, h3, h4, h5, h6 {
  color: var(--text-color-primary);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Icon fitur berwarna biru gelap */
.single-feature .icon i {
  color: var(--primary-color);
}

/* Navbar toggler icon oranye */
.navbar-toggler .toggler-icon {
  background-color: var(--secondary-color-start);
}

/* Navbar Brand img - hapus filter supaya warna asli logo tampil maksimal */
/* Kalau ingin memberi sedikit brightness bisa modifikasi filter */
/* Default: no filter */
.navbar-brand img {
  filter: none;
}

/* Scroll to top button */
.scroll-top {
  background: linear-gradient(45deg, var(--secondary-color-start), var(--secondary-color-end));
  color: white;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 3px 12px rgba(255, 130, 0, 0.5);
}

.scroll-top:hover {
  background: linear-gradient(45deg, #e65d00, #ff7200);
  color: white;
}

/* Section title warna biru gelap */
.section-title h3 {
  color: var(--primary-color);
  font-weight: 700;
}

/* Paragraph di section title abu gelap */
.section-title p {
  color: var(--text-color-secondary);
}

/* Pricing card */
.single-pricing {
  border: 2px solid var(--primary-color-gradient-end);
  background-color: white;
  color: var(--text-color-primary);
  border-radius: 15px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.single-pricing.active, .single-pricing:hover {
  border-color: var(--secondary-color-start);
  box-shadow: 0 10px 25px rgba(255, 130, 0, 0.35);
}

.single-pricing h6,
.single-pricing h4,
.single-pricing h3 {
  color: var(--primary-color);
  font-weight: 700;
}

.single-pricing ul li {
  color: var(--text-color-secondary);
  margin-bottom: 8px;
}

/* Tombol di pricing */
.single-pricing .button {
  background: linear-gradient(45deg, var(--secondary-color-start), var(--secondary-color-end));
  border: none;
  color: white;
  font-weight: 600;
}

.single-pricing .button:hover {
  background: linear-gradient(45deg, #e65d00, #ff7200);
}

/* Feature image saturasi sedikit diperkuat */
.feature-img img {
  filter: saturate(1.3);
  transition: filter 0.3s ease;
}

.feature-img img:hover {
  filter: saturate(1.5);
}

/* Responsive tweaks for navbar toggler */
@media (max-width: 991px) {
  .navbar-toggler .toggler-icon {
    background-color: var(--primary-color);
  }
}