/* Base styles */
.container {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0 15px; /* Add padding for responsiveness */
    justify-content: flex-start; /* Posisi konten ke kiri */
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: white;
  }
  
  .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px 30px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 40px;
  margin-right: 20px;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 30px;
  padding: 0;
  margin: 0;
}

.nav-links a {
  text-decoration: none;
  color: #000;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #0072CE;
}

.search-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
  width: 150px;
}

.search-btn {
  background: linear-gradient(to right, #002F6C, black);
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease-in-out;
}

.search-btn:hover {
  background: linear-gradient(to left, #002F6C, black);
}

.sticky {
  position: sticky;
  top: 0px;
  z-index: 1000;
}

  /* Media query for mobile */
@media (max-width: 768px) {
    .nav-links {
      display: none; /* Hide on mobile by default */
    }
  
    .hamburger-menu {
      display: flex; /* Show hamburger icon on mobile */
    }
  }

/* Hero Section */
.hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('assets/foto-bg.png') no-repeat center center/cover;
  color: white;
  height: 88vh;
  padding: 20px 20px 20px; /* Tambahkan padding atas untuk jarak */
  justify-content: flex-start; /* Mulai dari atas */
}

/* Teks tetap di kiri */
.hero-text {
  max-width: 600px; /* Agar teks tidak terlalu panjang */
  text-align: left;
  margin-top: 0px;
  padding-top: 50px; /* Menambah jarak teks dengan atas */
  padding: 0px; /* Padding default */
  text-size-adjust: 45px;
  margin-left: 0px;
}

.hero h1 {
  font-size: 3rem;
  line-height: 1.3;
  padding: 10x -5px 2px; /* Tambahkan padding atas untuk jarak */
  margin-top: -100px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero h6 {
  line-height: 1.6;
  margin-top: 10px;
  color: white;
  padding: 0px -5px 20px;
  width: 35vw;
}

.headerbluebg {
    background: linear-gradient(to right, #002F6C, black);
    width: 50%;
    text-align: center;
    padding: 10px;
    color: white;
    border-radius: 25px;
  }

.hero-text {
  margin-bottom: 60px; /* Memberikan jarak lebih ke shapes */
}


/* Shapes tetap di tengah */
.shapes {
  display: flex;
  gap: 25px;
  margin-top: 400px;
}

.shape {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 200px;
  height: 65px;
  background: #9966A7;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  border-radius: 15px;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.shape:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.shape img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  object-fit: contain;
  border-radius: 8px; /* Opsional: jika ingin sudut agak membulat */
  box-shadow: 0 0 0 3px #ffffff; /* Stroke putih tebal 3px */
}

/* Responsif */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }

  .hero h6 {
    font-size: 0.9rem;
  }

  .shape {
    width: 180px;
    height: 50px;
  }

  .shape img {
    width: 25px;
    height: 25px;
  }
}

.stats {
  fill: #0E3AA0;
  max-height: none; 
  height: auto; 
  padding: 5px 0;
  margin-bottom: 30px;
}

.stats h2 {
  color: white; 
  font-weight: bold;
  line-height: 1.2;
  margin: 0;
}

.stats p {
  color: white; 
  text-align: left;     
  line-height: 1.2;
  margin: 0;   
}

.stats .col-md-3 {
  display: flex;           
  align-items: center;     
  justify-content: center; 
  gap: 20px;           
  margin-bottom: 0; 

}

/* Jarak antar elemen vertikal */
.stats .col-md-3 {
  margin-bottom: 15px;

}

/* Mengatur tata letak agar tetap rapi di perangkat kecil */
@media (max-width: 768px) {
  .stats .col-md-3 {
      flex: 0 0 50%;  /* Dua kolom per baris di perangkat kecil */
      max-width: 50%;
  }
}

@media (max-width: 576px) {
  .stats .col-md-3 {
      flex: 0 0 100%;  /* Satu kolom per baris di perangkat sangat kecil */
      max-width: 100%;
  }
}

.about {
  padding-top: 8rem; /* py-5 equivalent */
  padding-bottom: 0rem;
  height: 70vh;
  margin-top: 5vh;
}

/* CSS untuk mengatur ukuran gambar */
.about img {
  max-width: 80%; /* Membuat gambar responsif */
  height: auto; /* Menjaga rasio aspek gambar */
  border-radius: 8px; /* Membuat gambar tetap bulat seperti yang disebutkan */
}

/* Tambahan styling untuk memastikan gambar terlihat baik di berbagai ukuran layar */
@media (max-width: 768px) {
  .about img {
      width: 100%; /* Pada layar kecil, gambar memenuhi lebar kolom */
  }
}



        .service-section {
            padding: 50px 30px;
            background-color: #E2F5FF;
            height: 88vh;;
        }

        .section-header {
            margin-bottom: 40px;
            margin-left: 20px;
        }

        .section-header h2 {
            font-size: 16px;
            font-weight: 600;
            color: #0000FF;
            margin: 0 10 10px 0;
            text-align: left;
            display: flex;
            align-items: center;
        }

        .section-header h2::before {
            content: url('icon-small.png'); /* Replace with the path to your icon */
            display: inline-block;
            margin-right: 10px;
            width: 16px;
            height: 16px;
        }

        .section-header p {
            font-size: 36px;
            font-weight: 600;
            margin: 0;
            text-align: left;
            font-style: bold;
            margin-left: 3px;
        }

        .service-card {
            background-color: #9966A7;
            color: #fff;
            border-radius: 40px;
            padding: 20px;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 214px 60px 0px rgba(0, 0, 0, 0.00), 0px 137px 55px 0px rgba(0, 0, 0, 0.03), 0px 77px 46px 0px rgba(0, 0, 0, 0.10), 0px 34px 34px 0px rgba(0, 0, 0, 0.17);
          }

        .service-card img {
            width: 7.534246575342466vh;
            height: 2.73972602739726vh;
            display: block;
            margin-bottom: 10px;
        }

        .service-card h3 {
            font-size: 14px;
            font-weight: 600;
            margin: 10px 0;
            text-align: left;
        }

        .service-card p {
            font-size: 14px;
            color: #d9e6ff;
            margin: 5px 0 15px 0;
            text-align: left;
        }

        .read-more {
            display: inline-block;
            padding: 8px 20px;
            background-color: #fff;
            color: #0056b3;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            text-align: left;
        }

        .read-more:hover {
            background-color: #eaf4ff;
            color: #0056b3;
        }

        .read-more-section {
            margin-top: 40px;
            text-align: center;
        }

        .read-more-section a {
            display: inline-block;
            padding: 10px 30px;
            background-color: #0056b3;
            color: #fff;
            border-radius: 20px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .read-more-section a:hover {
            background-color: #003f82;
        }

        @media (max-width: 768px) {
            .section-header {
                text-align: left;
            }

            .service-card {
                padding: 15px;
            }

            .service-card h3 {
                font-size: 14px;
            }

            .service-card p {
                font-size: 12px;
            }

            .read-more {
                font-size: 12px;
                padding: 6px 15px;
            }
        }

        @media (max-width: 576px) {
            .service-section {
                padding: 30px 10px;
            }

            .service-card img {
                width: 18px;
                height: 18px;
            }

            .service-card h3 {
                font-size: 12px;
            }

            .service-card p {
                font-size: 10px;
            }

            .read-more {
                font-size: 10px;
                padding: 5px 10px;
            }
        }

        section {
          position: relative;
          max-width: 100%;
          overflow: hidden;
        }
    
        .overlay-container {
          position: relative;
          max-width: 100%;
        }
    
        .overlay-subtext {
          position: absolute;
          top: 90px;
          left: 50px;
          color: white;
          font-size: 1rem;
          font-weight: 400;
        }
    
        .overlay-text {
          position: absolute;
          top: 110px;
          left: 50px;
          color: white;
          font-size: 3.0rem;
          font-weight: 600;
          max-width: 70%;
        }
    
        .overlay-button {
          position: absolute;
          top: 280px;
          left: 50px;
          border-radius: 30px;
        }
    
        .overlay-button .btn {
          background-color: #9966A7;
          color:white;
          font-weight: 600;
          font-size: 1rem;
          padding: 10px 20px;
          border: none;
          border-radius: 30px;
          transition: all 0.3s ease;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    
        .overlay-button .btn:hover {
          background-color: #d736a7;
          color: #fff;
          transform: translateY(-5px);
        }
    
        img {
          width: 100%;
          height: auto;
          display: block;
        }

html {
  scroll-behavior: smooth;
}

.hospital-section {
  background-color: #f9fafc;
  margin-bottom: 20px;
}

/* Text Styling */
.text-primary {
  color: #9966a7 !important;
}

h1 {
  font-size: 2.0rem;
  line-height: 1.3;
}

.photo-card {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  height: 350px; /* Menambahkan tinggi card */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.photo-card .card-img {
  height: 100%; /* Membuat gambar memenuhi card */
  object-fit: cover; /* Memastikan gambar tidak terdistorsi */
  filter: brightness(75%);
  transition: filter 0.3s ease;
}

.photo-card:hover .card-img {
  filter: brightness(90%);
}

.card-img-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  color: white;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Konten tetap di bawah */
  transition: background 0.3s ease;
}

.photo-card:hover .card-img-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem; /* Ukuran teks lebih besar */
  margin-bottom: 0;
}

.text-muted {
  font-size: 0.9rem;
}

/* Mengatur tata letak ikon dan teks */
.icon-container {
  display: flex; /* Membuat ikon dan teks sejajar horizontal */
  align-items: center; /* Menengahkan vertikal */
}

.icon-img {
  width: 30px; /* Atur ukuran ikon */
  height: 30px;
  object-fit: contain; /* Ikon tetap proporsional tanpa terpotong */
  margin-right: 8px; /* Jarak antara ikon dan teks */
}

.text-label {
  font-size: 1.1rem; /* Ukuran teks */
  font-weight: bold; /* Membuat teks lebih tebal */
  color: #0d6efd; /* Warna biru sesuai Bootstrap */
}


/* FOOTER */
.bg-dark {
  background-color: #9966A7 !important;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.py-5 {
  padding-bottom: 1rem !important;
}

.col-md-3 img {
  height: 7vh;
  background-color: black;
  border-radius: 10px;
  padding: 5px;
  transform: background 0.3 ease;
}

.col-md-3 img:hover {
  background: linear-gradient(135deg, #002F6C, black);
}

.list-unstyled.d-flex a {
  margin-right: 10px;
  margin-left: 0px;
}

.list-unstyled.d-flex a:last-child {
  margin-right: 0;
}

.list-unstyled a {
  text-decoration: none !important;
  color: white;
  margin-left: 10px;
}

.list-unstyled a:hover {
  color: skyblue;
}

.ratakiri{
  margin-left: 0 !important;
}

.col-md-3 h5 {
  font-weight: 600;
}

.me-3 i {
  font-size: 1.5rem;
}

.me-3 i:hover {
  color: skyblue;
}

.footercopy {
  text-align: center;
  color: white;
  padding-top: 0;
}

.footercopy hr {
  padding-bottom: 0px;
  margin-block-end: 0px;
}

.footercopy h6 {
  font-size: 14px;
  padding: 10px;
  margin-block-start: 0px;
  margin-block-end: 0px;
  letter-spacing: 1px;
}

/* DOCTOR SECTION */
.doctor-card {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.doctor-card img {
  width: auto;
  height: 15rem;
  object-fit: cover;
  margin: 0 auto 10px;
  border-radius: 8px;
  display: block;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.doctor-info {
  margin-top: 10px;
}

.doctor-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.schedule-table {
  margin-top: 10px;
  display: none;
}

.btn-primary {
  background-color: #002F6C;
  border: none;
}

.btn-primary:hover {
  background-color: #007bff;
}

.btn-secondary {
  background-color: #565e64;
  border: none;
}

.btn-secondary:hover {
  background-color: #6c757d;
}

.container-subjudul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 5vh;
  margin-bottom: 5vh;
}

.subjudul {
  display: flex;
  flex-shrink: 0;
  align-content: center;
  align-items: center;
  text-align: center;
  object-position: center;
  justify-self: center;
  justify-content: center;
  justify-items: center;
  margin-bottom: 10px;
}

.subjudul-icon {
  width: 3%;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  align-content: center;
  object-position: center;
}

.sub-h6 {
  text-align: center;
  margin-bottom: 0;
  color: #002F6C;
}

.text-center {
  text-align: center;
}

.text-center h3 {
  font-weight: 900;
}

.text-center h5 {
  margin-top: 10vh;
  background: linear-gradient(to right, #002F6C, black);
  width: 50%;
  text-align: center;
  padding: 10px;
  color: white;
  font-weight: 600;
  border-radius: 25px;
  align-content: center;
  align-items: center;
  text-align: center;
  object-position: center;
  justify-self: center;
  justify-content: center;
  justify-items: center;
}