/* General Styles */
body {
  font-family: "Poppins", sans-serif;
  background-color: #f8f9fa;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
p {
  margin: 0;
  padding: 0;
}

.container {
  padding: 30px;
}

.navbar {
  background-color: #343a40;
}

.navbar-brand {
  font-weight: 700;
}

.navbar-nav .nav-link {
  font-weight: 600;
  padding: 10px 15px;
}

.navbar-nav .nav-link:hover {
  color: #007bff;
}

.jumbotron {
  background-color: #ffffff;
  border-radius: 0;
  padding: 50px 0;
}

.jumbotron img {
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.jumbotron img:hover {
  transform: scale(1.1);
}

.jumbotron h1 {
  font-size: 2.5rem;
  font-weight: 700;
}

.jumbotron p {
  font-size: 1.25rem;
}

.card {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-body {
  padding: 20px;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 600;
}

.card-text {
  font-size: 1rem;
}

.card .btn {
  width: 100%;
  border-radius: 5px;
}

/* Hover Effects for Project Cards (Pop-up & Zoom) */
.card:hover {
  transform: scale(1.05); /* Zoom effect */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Shadow to lift the card */
}

.card img {
  transition: transform 0.3s ease;
}

.card:hover img {
  transform: scale(1.1); /* Zoom effect on image */
}

.card-body {
  transition: opacity 0.3s ease;
}

.card:hover .card-body {
  opacity: 0.8; /* Dim the card body when hovered */
}

/* Media Queries for Responsiveness */
@media (max-width: 1200px) {
  .jumbotron h1 {
    font-size: 2rem;
  }

  .jumbotron p {
    font-size: 1rem;
  }
}

@media (max-width: 992px) {
  .navbar-collapse {
    text-align: center;
  }

  .card-title {
    font-size: 1.25rem;
  }

  .card-body {
    padding: 15px;
  }

  .jumbotron h1 {
    font-size: 2rem;
  }

  .jumbotron p {
    font-size: 1.2rem;
  }

  .container {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .navbar-brand {
    font-size: 1.5rem;
  }

  .navbar-nav .nav-link {
    font-size: 1rem;
    padding: 10px;
  }

  .card {
    margin-bottom: 20px;
  }

  .jumbotron img {
    width: 150px;
    height: 150px;
  }

  .jumbotron h1 {
    font-size: 1.8rem;
  }

  .jumbotron p {
    font-size: 1.1rem;
  }

  .container {
    padding: 10px;
  }
}

@media (max-width: 576px) {
  .navbar-nav .nav-link {
    font-size: 0.9rem;
    padding: 8px;
  }

  .card-body {
    padding: 10px;
  }

  .card-title {
    font-size: 1.1rem;
  }

  .jumbotron h1 {
    font-size: 1.6rem;
  }

  .jumbotron p {
    font-size: 1rem;
  }

  .jumbotron img {
    width: 120px;
    height: 120px;
  }
}

/* Sticky Navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000; /* Make sure the navbar stays above other content */
  background-color: #333; /* To ensure it's visible on scroll */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Adds shadow for better visibility */
}

/* Adding smooth transition on scroll */
.navbar a {
  transition: color 0.3s ease;
}

/* Change the color of navbar links when active */
.navbar a:hover {
  color: #f1f1f1; /* Adjust this color to match your design */
}

.modal-body img {
  max-width: 80%; /* Membatasi lebar gambar agar tidak melebihi kontainer */
  height: auto; /* Menjaga rasio aspek gambar */
  display: block;
  margin: 0 auto; /* Mengatur gambar agar berada di tengah */
}

/* Layanan */
/* Styling for the Services section */
#services {
  background-color: #f8f9fa;
}

#services .card {
  border: none;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#services .card:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

#services .card-body {
  padding: 20px;
}

#services .card-title {
  font-size: 1.25rem;
  font-weight: 600;
}

#services .card-text {
  font-size: 1rem;
  color: #6c757d;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  #services .card-img-top {
    height: 150px;
  }

  #services .card-body {
    padding: 15px;
  }
}

@media (max-width: 576px) {
  #services .card-img-top {
    height: 120px;
  }

  #services .card-title {
    font-size: 1rem;
  }

  #services .card-body {
    padding: 10px;
  }
}
/* Proses */
/* Proses Kerja Section */
#proses {
  background-color: #f8f9fa;
}

.process-step {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.process-step:hover {
  transform: translateY(-10px);
}

.step-icon {
  background-color: #007bff;
  color: white;
  padding: 20px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.process-step h5 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.process-step p {
  font-size: 1rem;
  color: #555;
}

@media (max-width: 768px) {
  .process-step {
    margin-bottom: 20px;
  }
}

#contact h2 {
  font-weight: 700;
  font-size: 2.5rem;
}

#contact .form-control {
  border-radius: 0.75rem;
  transition: all 0.3s ease;
}

#contact .form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

#contact button {
  font-weight: 500;
  transition: background-color 0.3s ease;
}

#contact a i:hover {
  color: #0d6efd;
}
/* Contact */
.contact p {
  text-align: center;
  margin: 10px 0;
}

.contact i {
  color: #6b46c1;
  margin-right: 8px;
}