body {
       font-family: 'Inter', sans-serif;
       max-width: 1500px;
       margin: 0 auto;
       overflow-x: hidden; /* Mencegah scroll horizontal yang tidak diinginkan */
   }

   a {
       text-decoration: none;
   }

   /* ======================================================================================== */
   /* Navbar */
   .navbar {
       /* This transition is for the background color change */
       background-color: transparent;
       transition: background-color 0.4s ease;
       box-shadow: none;
       /* Menyesuaikan navbar agar mengikuti max-width dari body */
       max-width: 1500px;
       width: 100%;
       left: 50%;
       transform: translateX(-50%);
   }

   /* On desktop, the navbar becomes white only when the user scrolls down */
   .navbar.scrolled {
       background-color: rgba(255, 255, 255, 0.9);
       /* Latar belakang putih semi-transparan */
       backdrop-filter: blur(10px);
       /* Efek kaca buram */
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   }

   .navbar-brand img {
       height: 95px;
       width: auto;
       object-fit:cover;
   }

   .content {
       max-width: 100%; /* Menyesuaikan dengan parent (body) */
       margin: 0 auto;
   }


   /* On mobile (screens smaller than 992px), the navbar is always white */
   @media (max-width: 991.98px) {
       .navbar {
           background-color: white;
           box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
       }
   }

   @media (max-width: 576px) {
       .navbar-brand img {
           height: 60px;
           /* Adjust height for mobile */
           width: auto;
           /* Maintain aspect ratio */
       }
   }

   /* ======================================================================================== */
   /* Hero Section */
   .hero {
       min-height: 850px;
       background-position: center;
       background-size: cover;
   }

   .hero-title {
       font-size: 24px;
       font-weight: 400;
       color: #5D5D5D;
   }

   .hero-subtitle {
       font-size: 1.25rem;
       color: #6c757d;
   }

   .hero-tagline {
       font-size: 3.8rem;
       font-weight: 400;
       color: #5a5a5a;
       line-height: 1.2;
   }

   .btn-primary-custom {
       background-color: #6DF754;
       border: none;
       color: #007538;
       font-weight: 500;
       padding: 12px;
   }

   .btn-primary-custom:hover {
       background-color: #6DF754;
   }

   .hero-form-label {
       color: white;
       font-weight: 500;
   }

   .hero-search-container {
       border-radius: 20px;
   }

   @media (max-width: 991.98px) {
       .hero-search-container {
           background-color: rgba(255, 255, 255, 0.9);
           backdrop-filter: blur(10px);
           padding: 24px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       }

       .hero-form-label {
           color: #333;
       }
   }


   @media (max-width: 768px) {
       .hero {
           align-items: flex-start;
           min-height: 95vh;
           padding-top: 8rem;
           padding-bottom: 4rem;
           background-position: 10% center;
           background-size: cover;
           position: relative;
           display: flex;
           justify-content: center;
       }

       .hero::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
       }

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

       .hero-title {
           font-size: 18px;
       }

       .hero-tagline {
           font-size: 2.5rem;
           line-height: 1.3;
       }

       .hero-subtitle {
           font-size: 1.1rem;
       }
   }

   /* ======================================================================================== */


   /* SECTION QUICK MENU */

   .quick-menu-section {
       margin-top: 100px;
       padding-bottom: 80px;
       position: relative;
       z-index: 10;
   }

   .quick-menu-wrapper {
       display: flex;
       flex-wrap: wrap;
       gap: 40px;
       justify-content: center;
   }

   .quick-menu-card {
       background: #ffffff;
       border-radius: 22px;
       padding: 26px 22px;
       width: 190px;
       text-align: center;
       box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .quick-menu-card:hover {
       transform: translateY(-6px);
       box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
   }

   .quick-menu-card .icon {
       font-size: 38px;
       color: #7CDB5A;
       margin-bottom: 14px;
   }

   .quick-menu-card p {
       margin: 0;
       font-size: 15px;
       font-weight: 500;
       color: #2f2f2f;
   }

   /* Mobile: Wrap cards into a grid */
   @media (max-width: 768px) {
       .quick-menu-section {
           margin-top: 40px;
           padding-bottom: 50px;
       }

       .quick-menu-wrapper {
           gap: 20px;
           /* Smaller gap on mobile */
           justify-content: center;
       }

       .quick-menu-card {
           /* 2-column layout */
           width: calc(50% - 10px);
           padding: 1.5rem 1rem;
       }
   }

   @media (max-width: 420px) {
       .quick-menu-card {
           /* 1-column layout on very small screens */
           width: 75%;
       }
   }

   /* ======================================================================================== */


   /* Offer Section */
   .offer-section {
       padding: 100px 0;
       background-color: #fafafa;
       font-family: 'Nokora', sans-serif;
   }

   .offer-title {
       font-size: 42px;
       font-weight: 400;
       color: #000;
       line-height: 1.2;
       margin-bottom: 20px;
   }

   .offer-desc {
       font-size: 16px;
       color: #555;
       max-width: 420px;
       margin-bottom: 28px;
   }

   .btn-offer {
       background-color: #6DF754;
       color: #007538;
       padding: 12px 28px;
       border-radius: 10px;
       font-weight: 500;
       text-decoration: none;
   }

   .btn-offer:hover {
       background-color: #5fe147;
       color: #007538;
   }

   /* Offer Card */
   .offer-card {
       background-color: #fafafa;
       border-radius: 26px;
       padding: 16px;
       /* box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); */
   }

   .offer-card img {
       width: 100%;
       border-radius: 20px;
       object-fit: cover;
   }

   .carousel-indicators [data-bs-target] {
       background-color: #5fe147;
       width: 10px;
       height: 10px;
       border-radius: 50%;
   }

   .offer-card .carousel-item {
       width: 100%;
       height: 500px;
   }

   .offer-card .carousel-item img {
       height: 100%;
       object-fit: contain;
   }

   /* Mobile */
   @media (max-width: 768px) {
       .offer-section {
           padding: 70px 0;
           text-align: center;
       }

       .offer-title {
           font-size: 30px;
       }

       .offer-desc {
           margin-left: auto;
           margin-right: auto;
       }

       .offer-card .carousel-item {
           height: 250px;
       }

       .custom-article-carousel {
           width: 90% !important;
           height: 240px !important;
           border-radius: 120px !important;
       }
   }

   /* ======================================================================================== */

   /* SECTION ARTIKEL KESEHATAN */

   .artikel-kesehatan {
       padding: 90px 0;
       margin-top: 120px;
       font-family: 'Nokora', sans-serif;
   }

   /* STAGE */
   .article-stage {
       position: relative;
       width: 1000px;
       max-width: 100%;
       height: 420px;
       margin: 0 auto;
       overflow: hidden;
   }

   /* COMMON IMAGE */
   .article-img {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       border-radius: 999px;
       overflow: hidden;
       background-color: #fff;
       transition: all 0.6s ease-in-out;
       opacity: 0;
       z-index: 0;
       left: 50%;
       width: 520px;
       height: 300px;
   }

   .article-img img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   /* CENTER IMAGE */
   .article-img.center {
       width: 680px;
       height: 380px;
       left: 50%;
       transform: translate(-50%, -50%);
       z-index: 3;
       box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
       opacity: 1;
   }

   .article-img.center img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   /* SIDE IMAGES */
   .article-img.left,
   .article-img.right {
       width: 520px;
       height: 300px;
       z-index: 1;
       opacity: .55;
       /* Reset default left: 50% */
   }

   .article-img.left {
       left: 0;
       transform: translate(0, -50%);
   }

   .article-img.right {
       left: 100%;
       transform: translate(-100%, -50%);
   }

   .article-img.left img,
   .article-img.right img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   /* DOTS */
   .dots {
       margin-top: 25px;
   }

   .dots span {
       display: inline-block;
       width: 10px;
       height: 10px;
       margin: 0 4px;
       background: #bbb;
       border-radius: 50%;
       cursor: pointer;
   }

   .dots span.active {
       background: #777;
   }

   /* BUTTON */
   .btn-info {
       display: inline-block;
       margin-top: 20px;
       background: #6CFF4A;
       color: #fff;
       padding: 10px 22px;
       border-radius: 20px;
       text-decoration: none;
   }

   @media (max-width: 992px) {
       .artikel-kesehatan {
           padding: 50px 0;
       }

       .article-stage {
           width: 100%;
           height: 300px;
       }

       /* Pastikan ukuran gambar konsisten di mobile untuk mencegah layout rusak */
       .article-img,
       .article-img.center,
       .article-img.left,
       .article-img.right {
           width: 90%;
           height: 260px;
       }

       .article-img.left,
       .article-img.right {
           opacity: 0;
           z-index: -1;
       }
   }

   /* ======================================================================================== */

   /* SECTION KAMAR PERAWATAN */

   .kamar-perawatan {
       background-color: #fafafa;
       font-family: 'Nokora', sans-serif;
   }
   

   /* Carousel Wrapper */
   .room-carousel-wrapper {
       border-radius: 28px;
       overflow: hidden;
       box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
   }

   /* Image */
   .room-img {
       height: 360px;
       object-fit: cover;
       cursor: zoom-in;
   }

   /* Text */
   .room-title {
       font-size: 44px;
       font-weight: 400;

   }

   .room-desc {
       font-size: 20px;
       font-weight: 400;
       color: #555;
       line-height: 1.6;
   }

   @media (max-width: 768px) {
       .kamar-perawatan {
           /* Add horizontal padding for better spacing on mobile */
           padding: 50px 20px;
       }

       .room-title {
           font-size: 32px;
       }

       .room-desc {
           font-size: 16px;
       }

       .room-img {
           height: 250px;
       }

       /* Remove default container-fluid padding to avoid double padding */
       .kamar-perawatan .container-fluid {
           padding-left: 0;
           padding-right: 0;
       }
   }

   /* Modal image */
   #imageModal {
       z-index: 100000;
   }

   #imageModal img {
       max-height: 85vh;
       width: auto;
       max-width: 100%;
       margin: 0 auto;
       display: block;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
   }

   /* ======================================================================================== */

   .mitra-kami {
       padding: 40px 0;
       font-family: 'Nokora', sans-serif;
   }

   .mitra-title {
       font-size: 38px;
       font-weight: 400;
   }

   /* Logo container */
   .mitra-logos {
       display: flex;
       align-items: center;
       gap: 120px;
       flex-wrap: wrap;
   }

   @media (max-width: 768px) {
       .mitra-logos {
           justify-content: center;
           gap: 30px;
       }

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

   /* FIX SIZE LOGO */
   .mitra-logos img {
       height: 140px;
       width: 180px;
       object-fit: contain;
       filter: grayscale(100%);
       opacity: 0.85;
       transition: 0.3s;
   }

   .mitra-logos img:hover {
       filter: grayscale(0%);
       opacity: 1;
   }

   @media (max-width: 768px) {
       .mitra-logos img {
           height: 60px;
           width: auto;
           max-width: 100px;
       }
   }

   /* ======================================================================================== */

   .jadwal-dokter {
       font-family: 'Nokora', sans-serif;
       font-weight: 400;
   }

   .jadwal-icon img {
       width: 92px;
   }

   .jadwal-title {
       font-size: 48px;
       margin-bottom: 6px;
   }

   .jadwal-desc {
       font-size: 16px;
       color: #555;
       max-width: 520px;
       line-height: 1.6;
   }

   .cari-jadwal-dokter {
       background: #005343;
       padding: 60px 0;
   }

   @media (max-width: 768px) {
       .cari-jadwal-dokter {
           padding: 40px 0;
       }
   }

   /* Form wrapper */
   .jadwal-form {
       max-width: 800px;
       margin: 0 auto;
       text-align: center;
   }

   /* Label */
   .jadwal-form .form-label {
       color: #fff;
       font-size: 16px;
       display: block;
       margin-bottom: 10px;
       text-align: left;
   }

   /* Input */
   .jadwal-input {
       height: 52px;
       border-radius: 10px;
       border: none;
       padding: 0 18px;
       font-size: 16px;
       margin-bottom: 30px;
   }

   /* Button */
   .btn-cari-jadwal {
       background: #7CFF5B;
       color: #fff;
       font-size: 18px;
       font-weight: 600;
       padding: 14px 40px;
       border-radius: 10px;
       border: none;
       width: 100%;
       max-width: 420px;
   }

   .btn-cari-jadwal:hover {
       background: #6ae94f;
   }

   .jadwal-dokter-list {
       padding: 100px 0;
       background: #fff;
       font-family: 'Nokora', sans-serif;
   }

   /* WRAPPER */
   .dokter-wrapper {
       position: relative;
       max-width: 1100px;
       margin: 0 auto;
       height: 560px;
   }

   /* FOTO */
   .dokter-photo-float {
       position: absolute;
       left: 0;
       top: 0;
       width: 354px;
       height: 532px;
       z-index: 3;
       /* FOTO DI ATAS */
   }

   .dokter-photo-float img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       border-radius: 45px;

   }

   /* CARD PUTIH (NGE-COVER FOTO) */
   .dokter-card-overlap {
       position: absolute;
       left: 220px;
       top: 230px;
       width: calc(100% - 220px);
       height: 300px;
       background: #fff;
       border-radius: 28px;
       box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
       z-index: 2;
       display: flex;
       align-items: center;
   }

   /* INFO */
   .dokter-info {
       padding-left: 200px;
   }

   .dokter-info h3 {
       font-size: 24px;
       font-weight: 600;
       margin-bottom: 8px;
   }

   .dokter-info .spesialis {
       font-size: 16px;
       color: #666;
       margin-bottom: 26px;
   }

   .jadwal-hari,
   .jadwal-jam {
       font-size: 16px;
       margin: 0;
   }

   .jadwal-hari {
       margin-bottom: 6px;
   }

   @media (max-width: 992px) {
       .jadwal-dokter-list {
           padding: 60px 0;
       }

       .dokter-wrapper {
           height: auto;
           /* Hapus tinggi tetap */
           max-width: 400px;
           /* Batasi lebar di mobile */
       }

       .dokter-photo-float {
           position: relative;
           /* Reset posisi */
           width: 200px;
           height: 200px;
           margin: 0 auto;
           /* Foto menjadi di tengah */
           border-radius: 50%;
           /* Buat foto menjadi lingkaran */
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
       }

       .jadwal-title {
           font-size: 28px;

       }

       .dokter-photo-float img {
           border-radius: 50%;
           /* Pastikan gambar di dalamnya juga bulat */
           object-fit: cover;
           object-position: center; /* Memusatkan gambar secara vertikal dan horizontal */
       }

       .dokter-card-overlap {
           position: relative;
           /* Reset posisi */
           width: 100%;
           height: auto;
           left: 0;
           top: 0;
           margin-top: -100px;
           /* Tarik kartu ke atas agar menumpuk dengan foto */
           text-align: center;
       }

       .dokter-info {
           padding: 120px 25px 25px 25px;
           /* Padding atas untuk memberi ruang dari foto */
       }
   }

   /* ==================================================================================================== */

   .rawat-inap {
       padding: 80px 0;
       background: #fff;
       font-weight: 400;
       font-family: 'Nokora', sans-serif;
       margin-top:90px;
   }

   /* HEADER */
   .rawat-inap .section-header {
       display: flex;
       gap: 35px;
       width: 950px;
       margin-bottom: 125px;
       padding-left: 50px;
   }

   .rawat-inap .section-header h2 {
       font-size: 48px;
       line-height: 120%;
       letter-spacing: -2%;
   }

   .rawat-inap .section-header p {
       margin: 0;
       font-size: 20px;
       color: #555;
       line-height: 160%;
   }

   .rawat-inap .section-header img {
       width: 100px;
       height: 100px;
   }

   /* LIST VERTIKAL */
   .rawat-inap .kamar-list {
       display: flex;
       flex-direction: column;
       gap: 60px;
       align-items: center;
   }

   /* CARD */
   .rawat-inap .kamar-card {
       width: 580px;
       height: 620px;
       background: #fff;
       border-radius: 76px;
       box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
       overflow: hidden;
   }

   /* IMAGE */
   .rawat-inap .kamar-image {
       height: 60%;
       width: 100%;
   }

   .rawat-inap .kamar-image img {
       width: 100%;
       height: 100%;
       object-fit: fill;
   }

   /* BODY */
   .rawat-inap .kamar-body {
       padding: 20px;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .rawat-inap .kamar-body h3 {
       font-size: 48px;
       font-weight: 400;
   }

   /* BUTTON */
   .rawat-inap .btn-info {
       background: #6CFF4A;
       color: #fff;
       padding: 12px 14px;
       margin-top: 90px;
       border-radius: 10px;
       font-size: 14px;
       text-decoration: none;
   }

   /* Responsive adjustments for Kamar Perawatan section */
   @media (max-width: 992px) {
       .rawat-inap .section-header {
           flex-direction: column;
           text-align: center;
           align-items: center;
           max-width: 100%;
           padding: 0 20px;
           margin-bottom: 40px;
       }

       .rawat-inap .section-header h2 {
           font-size: 36px;
       }

       .rawat-inap .section-header p {
           font-size: 18px;
       }
   }

   @media (max-width: 768px) {
       .rawat-inap {
           padding: 60px 0;
       }

       .rawat-inap .kamar-card {
           width: 90%;
           height: auto;
           /* Hapus tinggi tetap agar konten bisa menyesuaikan */
           border-radius: 40px;
           /* Perkecil radius sudut */
       }

       .rawat-inap .kamar-image {
           /* Gunakan tinggi yang lebih masuk akal untuk mobile */
           height: 300px;
       }

       .rawat-inap .kamar-body {
           margin-top: 0;
           flex-direction: column;
           align-items: flex-start;
           gap: 15px;
           padding: 24px;
       }

       .rawat-inap .kamar-body h3 {
           margin-top: 0;
           font-size: 24px;
       }

       .rawat-inap .btn-info {
           margin-top: 0;
       }
   }

   /* Room Detail Modal */
   #roomDetailModal .modal-content {
       border-radius: 24px;
       overflow: hidden;
   }

   #roomDetailModal #modalRoomImage {
       height: 400px;
       object-fit: cover;
   }

   @media (max-width: 768px) {
       #roomDetailModal #modalRoomImage {
           height: 250px;
       }
   }


   /* ======================================================================================================== */


   .penunjang-medis {
       font-family: 'Nokora', sans-serif;
       font-weight: 400;
       padding-top: 30px;
       margin-top:90px;
   }

   .penunjang-medis-icon img {
       width: 92px;
   }

   .penunjang-medis-title {
       font-size: 48px;
       margin-bottom: 6px;
   }

   .penunjang-medis-desc {
       font-size: 20px;
       color: #555;
       line-height: 1.6;
   }

   .cari-penunjang-medis {
       background: #005343;
       padding: 60px 0;
   }


   @media (max-width: 768px) {
       .cari-penunjang-medis {
           padding: 40px 0;
       }

       .penunjang-medis-title {
           font-size: 28px;
       }

       .penunjang-medis-desc {
           font-size: 16px;
           padding: 0 15px;
       }

       .penunjang-medis-icon img {
           width: 70px;
       }

       .penunjang-image {
           height: 220px;
       }

       .penunjang-content h2 {
           font-size: 8px;
           display: block;
       }

       .penunjang-content p {
           font-size: 12px;
       }

       .penunjang-content li {
           font-size: 12px;
       }
   }

   /* Form wrapper */
   .penunjang-medis-form {
       max-width: 800px;
       margin: 0 auto;
       text-align: center;
   }

   /* Label */
   .penunjang-medis-form .form-label {
       color: #fff;
       font-size: 16px;
       display: block;
       margin-bottom: 10px;
       text-align: left;
   }

   /* Input */
   .penunjang-medis-input {
       height: 52px;
       border-radius: 10px;
       border: none;
       padding: 0 18px;
       font-size: 16px;
       margin-bottom: 30px;
   }

   /* Button */
   .btn-cari-penunjang-medis {
       background: #7CFF5B;
       color: #fff;
       font-size: 18px;
       font-weight: 600;
       padding: 14px 40px;
       border-radius: 10px;
       border: none;
       width: 100%;
       max-width: 420px;
   }

   .btn-cari-penunjang-medis:hover {
       background: #6ae94f;
   }

   .penunjang-medis-list {
       width: 100%;
       padding: 120px 0;
   }

   /* Override container bawaan bootstrap / template */
   .penunjang-medis-list .container {}

   /* CARD */
   .penunjang-card {
       width: 900px;
       height: 1100px;
       background: #ffffff;
       border-radius: 96px;
       box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
       overflow: hidden;
       display: flex;
       flex-direction: column;
       margin: 0 auto;
       max-width: 100%;
   }


   /* IMAGE */
   .penunjang-image {
       height: 60%;
       width: 100%;
       overflow: hidden;
       background-color: #005343;
   }

   .penunjang-image img {
       width: 100%;
       height: 100%;
       object-fit: fill;
       display: block;
   }

   .penunjang-content {
       padding: 40px 56px 56px;
   }

   .penunjang-content h2 {
       font-size: 48px;
       font-weight: 400;
       margin: 0 0 16px;
   }

   .penunjang-content p {
       font-size: 20px;
       margin: 0 0 20px;
   }

   .penunjang-content ul {
       margin: 0;
       padding-left: 20px;
   }

   .penunjang-content li {
       font-size: 15px;
       line-height: 1.7;
       margin-bottom: 14px;
   }

   .penunjang-medis-list .carousel-inner {
       padding: 50px 60px 100px 60px;
   }



   @media (max-width: 992px) {
       .penunjang-medis-list {
           padding: 60px 0;
       }

       .penunjang-medis-list .carousel-inner {
           padding: 20px 20px 50px 20px;
       }

       .penunjang-medis {
           text-align: center;
           padding-bottom: 20px;
       }

       .penunjang-medis-icon img {
           margin-bottom: 20px;
       }

       .penunjang-medis-title {
           font-size: 32px;
       }

       .penunjang-card {
           width: 92%;
           max-width: 500px;
           height: 500px;
           border-radius: 32px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
           margin: 0 auto;
       }

       .penunjang-image {
           height: 260px;
       }

       .penunjang-content {
           height: auto;
           flex: 1;
           padding: 32px 28px;
           margin-top: 0;
           text-align: left;
           overflow-y: auto;
       }

       .penunjang-content h2 {
           font-size: 24px;
       }

       .penunjang-content p {
           font-size: 16px;
       }
   }



   /* ======================================================================================================== */


   .artikel-kesehatan {
       font-family: 'Nokora', sans-serif;
       font-weight: 400;
       padding-top: 30px;
   }

   .artikel-kesehatan-icon img {
       width: 92px;
   }

   .artikel-kesehatan-title {
       font-size: 48px;
       margin-bottom: 6px;
   }

   .artikel-kesehatan-desc {
       font-size: 20px;
       color: #555;
       line-height: 1.6;
   }

   .cari-artikel-kesehatan {
       background: #005343;
       padding: 60px 0;
   }


   @media (max-width: 768px) {
       .cari-artikel-kesehatan {
           padding: 40px 0;
       }

       .artikel-kesehatan-title {
           font-size: 28px;
       }

       .artikel-kesehatan-desc {
           font-size: 16px;
           padding: 0 15px;
       }

       .artikel-kesehatan-icon img {
           width: 70px;
       }

       .artikel-image {
           height: 220px;
       }

       .artikel-content h2 {
           font-size: 28px;
       }

       .artikel-content p {
           font-size: 16px;
       }

       .artikel-content li {
           font-size: 14px;
       }
   }

   /* Form wrapper */
   .artikel-kesehatan-form {
       max-width: 800px;
       margin: 0 auto;
       text-align: center;
   }

   /* Label */
   .artikel-kesehatan-form .form-label {
       color: #fff;
       font-size: 16px;
       display: block;
       margin-bottom: 10px;
       text-align: left;
   }

   /* Input */
   .artikel-kesehatan-input {
       height: 52px;
       border-radius: 10px;
       border: none;
       padding: 0 18px;
       font-size: 16px;
       margin-bottom: 30px;
   }

   /* Button */
   .btn-cari-artikel-kesehatan {
       background: #7CFF5B;
       color: #fff;
       font-size: 18px;
       font-weight: 600;
       padding: 14px 40px;
       border-radius: 10px;
       border: none;
       width: 100%;
       max-width: 420px;
   }

   .btn-cari-artikel-kesehatan:hover {
       background: #6ae94f;
   }

   .artikel-kesehatan-list {
       width: 100%;
       padding: 120px 0;
   }

   /* Override container bawaan bootstrap / template */
   .artikel-kesehatan-list .container {}

   /* CARD */
   .artikel-card {
       width: 100%;
       height: 100%;
       background: #ffffff;
       border-radius: 24px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
       overflow: hidden;
       display: flex;
       flex-direction: column;
       margin: 0 auto;
       margin-bottom: 0;
       max-width: 100%;
       transition: transform 0.3s ease;
   }

   .artikel-card:hover {
       transform: translateY(-5px);
   }

   /* IMAGE */
   .artikel-image {
       height: 240px;
       width: 100%;
       overflow: hidden;
       background-color: #005343;
   }

   .artikel-image img {
       width: 100%;
       object-fit: cover;
       height: 100%;
   }

   .artikel-content {
       padding: 24px;
       flex: 1;
   }

   .artikel-content h2 {
       font-size: 22px;
       font-weight: 600;
       margin: 0 0 12px;
   }

   .artikel-content p {
       font-size: 15px;
       margin: 0 0 16px;
   }

   .artikel-content ul {
       margin: 0;
       padding-left: 20px;
   }

   .artikel-content li {
       font-size: 15px;
       line-height: 1.7;
       margin-bottom: 14px;
   }

   .artikel-kesehatan-list .carousel-inner {
       padding: 50px 60px 100px 60px;
   }



   @media (max-width: 992px) {
       .artikel-kesehatan-list {
           padding: 60px 0;
       }

       .artikel-kesehatan-list .carousel-inner {
           padding: 20px 20px 50px 20px;
       }

       .artikel-kesehatan {
           text-align: center;
           padding-bottom: 20px;
       }

       .artikel-kesehatan-icon img {
           margin-bottom: 20px;
       }

       .artikel-kesehatan-title {
           font-size: 32px;
       }

       .artikel-card {
           width: 92%;
           max-width: 500px;
           height: 500px;
           border-radius: 32px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
           margin: 0 auto;
       }

       .artikel-image {
           height: 260px;
       }

       .artikel-content {
           height: auto;
           flex: 1;
           padding: 32px 28px;
           margin-top: 0;
           text-align: left;
           overflow-y: auto;
       }

       .artikel-content h2 {
           font-size: 24px;
       }

       .artikel-content p {
           font-size: 16px;
       }
   }


   .artikel-detail {
       padding: 40px 0;
   }

   .artikel-detail .container-fluid {
       max-width: 1200px;
       margin: 0 auto;
   }

   /* META */
   .artikel-detail .artikel-meta {
       display: flex;
       gap: 16px;
       font-size: 0.9rem;
       color: #6c757d;
       margin-bottom: 8px;
   }

   /* TITLE */
   .artikel-detail .artikel-title {
       font-size: 2rem;
       font-weight: 700;
       line-height: 1.3;
       margin-bottom: 24px;
   }

   /* THUMBNAIL */
   .artikel-detail .artikel-thumbnail {
       aspect-ratio: 16 / 9;
       overflow: hidden;
       border-radius: 8px;
       margin-bottom: 32px;
   }

   .artikel-detail .artikel-thumbnail img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   /* CONTENT */
   .artikel-detail .artikel-content {
       font-size: 1rem;
       line-height: 1.8;
       color: #333;
   }

   .artikel-detail .artikel-content p {
       margin-bottom: 1rem;
   }

   .artikel-detail .artikel-content img {
       max-width: 100%;
       height: auto;
       border-radius: 6px;
       margin: 16px 0;
   }

   /* MOBILE */
   @media (max-width: 576px) {
       .artikel-title {
           font-size: 1.5rem;
       }

       .artikel-detail {
           padding: 24px 0;
       }
   }



   /* ======================================================================================================== */


   /* SECTION */
   .hubungi-kami {
       width: 100%;
       background: #ffffff;
       font-family: 'Nokora', sans-serif;
       font-weight: 400;
   }

   .hubungi-kami-icon img {
       width: 92px;
   }

   .hubungi-kami-title {
       font-size: 48px;
       margin-bottom: 6px;
   }

   .hubungi-kami-desc {
       font-size: 20px;
       color: #555;
       line-height: 1.6;
       margin-bottom: 80px;
   }

   .hubungi-icon-small img {
       width: 40px;
       height: 40px;
   }

   .hubungi-wrapper {
       display: flex;
       flex-direction: column;
       gap: 32px;
       margin: 0 auto;
       padding: 0 15px;
   }

   /* CONTENT */
   .hubungi-content {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 80px;
       padding: 60px 30px;
       border-radius: 24px;
       width: 100%;
   }

   .hubungi-content-highlight {
       background-color: #F6F6F6;
   }

   /* ICON BESAR */
   .hubungi-visual img {
       width: 350px;
       max-width: 100%;
       height: auto;
       object-fit: contain;
       opacity: 1;
       transform: rotate(0deg);
   }

   /* TEXT */
   .hubungi-text h3 {
       font-size: 36px;
       font-weight: 500;
       margin-bottom: 24px;
       line-height: 1.3;
   }

   /* BUTTON */
   .btn-hubungi {
       display: inline-block;
       padding: 14px 36px;
       background: #66f04c;
       color: #ffffff;
       border-radius: 8px;
       font-size: 16px;
       text-decoration: none;
       transition: 0.3s ease;
   }

   .btn-hubungi:hover {
       background: #57d93f;
   }

   @media (max-width: 992px) {
       .hubungi-kami {
           padding: 40px 0;
           text-align: center;
       }

       .hubungi-kami .row {
           /* Center title block on mobile */
           justify-content: center;
           margin-bottom: 30px;
       }

       .hubungi-kami-icon {
           text-align: center !important;
           margin-bottom: 1rem;
       }

       .hubungi-kami-title {
           font-size: 28px;
       }

       .hubungi-kami-desc {
           font-size: 16px;
           margin-bottom: 20px;
           padding: 0 20px;
       }

       .hubungi-content {
           flex-direction: column;
           gap: 24px;
           padding: 40px 20px;
           text-align: center;
       }

       .hubungi-visual img {
           width: 180px;
       }

       .hubungi-text h3 {
           font-size: 24px;
       }
   }

   /* ======================================================================================================== */




   .banner-pendaftaran {
       width: 100%;
       overflow: hidden;
   }

   .banner-pendaftaran img {
       width: 100%;
       height: auto;
       /* jaga proporsi */
       display: block;
       object-fit: cover;
   }


   /* ======================================================================================== */


   .footer-rs {
       background: #0a5c4d;
       padding: 60px 0;
   }

   .map-wrapper {
       width: 100%;
       height: 320px;
       border-radius: 6px;
       overflow: hidden;
   }

   .map-wrapper iframe {
       width: 100%;
       height: 100%;
       border: 0;
   }

   .footer-info h4 {
       font-size: 22px;
       font-weight: 600;
       margin-bottom: 10px;
   }

   .footer-info p {
       font-size: 15px;
       line-height: 1.6;
       margin-bottom: 0;
   }


   /* ======================================================================================================== */

   /* PROFIL PAGE */
   .profil-section {
       font-family: 'Nokora', sans-serif;
       font-weight: 400;
       padding-top: 30px;
       margin-top: 100px;
   }

   .profil-title {
       font-size: 48px;
       margin-bottom: 6px;
   }

   .profil-desc {
       font-size: 20px;
       color: #555;
       line-height: 1.6;
   }

   .profil-content {
       font-family: 'Nokora', sans-serif;
   }

   .profil-content h3 {
       font-weight: 600;
   }

   .profil-content p {
       font-size: 18px;
       line-height: 1.8;
       color: #444;
   }

   .hover-lift {
       transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   .hover-lift:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
   }

   /* PROFILE IMAGE WRAPPER */
   .profile-image-wrapper {
       display: flex;
       align-items: center;
       justify-content: center;
       height: 100%;
       width: 100%;
   }

   .profile-image-wrapper-top {
       display: flex;
       align-items: flex-start;
       justify-content: center;
       width: 100%;
   }

   .profile-image {
       width: 100%;
       max-width: 550px;
       height: auto;
       aspect-ratio: 4 / 3;
       object-fit: cover;
       border-radius: 24px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
       transition: all 0.3s ease;
       display: block;
   }

   .profile-image:hover {
       transform: translateY(-5px);
       box-shadow: 0 15px 40px rgba(0, 0, 0, 0.16);
   }

   @media (max-width: 768px) {
       .profil-title {
           font-size: 32px;
       }

       .profil-desc {
           font-size: 16px;
           padding: 0 15px;
       }

       .profile-image-wrapper-top {
           align-items: center;
       }

       .profile-image {
           max-width: 100%;
           aspect-ratio: 4 / 3;
       }
   }

   /* ======================================================================================================== */

   /* PROMOTION LANDING PAGE */

   .promotion {
       font-family: 'Nokora', sans-serif;
       font-weight: 400;
       padding-top: 30px;
       margin-top: 90px;
   }

   .promotion-icon img {
       width: 200px;
   }

   .promotion-title {
       font-size: 48px;
       margin-bottom: 6px;
   }

   .promotion-desc {
       font-size: 20px;
       color: #555;
       line-height: 1.6;
   }

   .cari-promotion {
       background: #005343;
       padding: 60px 0;
   }


   @media (max-width: 768px) {
       .cari-promotion {
           padding: 40px 0;
       }

       .promotion-title {
           font-size: 28px;
       }

       .promotion-desc {
           font-size: 16px;
           padding: 0 15px;
       }

       .promotion-icon img {
           width: 70px;
       }

       .promotion-image {
           height: 250px;
       }

       .promotion-content h2 {
           font-size: 28px;
       }

       .promotion-content p {
           font-size: 16px;
       }

       .promotion-content li {
           font-size: 14px;
       }
   }

   /* Form wrapper */
   .promotion-form {
       max-width: 800px;
       margin: 0 auto;
       text-align: center;
   }

   /* Label */
   .promotion-form .form-label {
       color: #fff;
       font-size: 16px;
       display: block;
       margin-bottom: 10px;
       text-align: left;
   }

   /* Input */
   .promotion-input {
       height: 52px;
       border-radius: 10px;
       border: none;
       padding: 0 18px;
       font-size: 16px;
       margin-bottom: 30px;
   }

   /* Button */
   .btn-cari-promotion {
       background: #7CFF5B;
       color: #fff;
       font-size: 18px;
       font-weight: 600;
       padding: 14px 40px;
       border-radius: 10px;
       border: none;
       width: 100%;
       max-width: 420px;
   }

   .btn-cari-promotion:hover {
       background: #6ae94f;
   }

   .promotion-list {
       width: 100%;
       padding: 120px 0;
   }

   /* Override container bawaan bootstrap / template */
   .promotion-list .container {}

   /* CARD */
   .promotion-card {
       width: 100%;
       height: 100%;
       background: #ffffff;
       border-radius: 16px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
       overflow: hidden;
       display: flex;
       flex-direction: column;
       transition: all 0.3s ease;
   }

   .promotion-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
   }

   /* IMAGE */
   .promotion-image {
       height: 280px;
       width: 100%;
       overflow: hidden;
       background-color: #f0f0f0;
       flex-shrink: 0;
   }

   .promotion-image img {
       width: 100%;
       object-fit: contain;
       height: 100%;
       transition: transform 0.3s ease;
   }

   .promotion-card:hover .promotion-image img {
       transform: scale(1.05);
   }

   .promotion-content {
       padding: 20px;
       flex: 1;
       display: flex;
       flex-direction: column;
   }

   .promotion-title-card {
       font-size: 18px;
       font-weight: 700;
       margin: 0 0 12px;
       color: #1a1a1a;
       line-height: 1.4;
       word-wrap: break-word;
       overflow: hidden;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
   }

   .promotion-date {
       flex: 1;
   }

   .promotion-date small {
       color: #0066cc;
       font-size: 13px;
       display: flex;
       align-items: center;
       gap: 6px;
       font-weight: 500;
   }

   .promotion-date i {
       font-size: 14px;
   }

   .promotion-content p {
       font-size: 15px;
       margin: 0 0 16px;
   }

   .promotion-content ul {
       margin: 0;
       padding-left: 20px;
   }

   .promotion-content li {
       font-size: 15px;
       line-height: 1.7;
       margin-bottom: 14px;
   }

   .promotion-footer {
       padding: 16px 20px 20px;
       border-top: 1px solid #f0f0f0;
   }

   .btn-promotion-detail {
       width: 100%;
       background: #005343;
       color: #7CFF5B !important;
       border: 2px solid #7CFF5B;
       border-radius: 8px;
       padding: 10px 16px;
       font-size: 14px;
       font-weight: 600;
       transition: all 0.3s ease;
       text-decoration: none;
       display: inline-block;
       text-align: center;
   }

   .btn-promotion-detail:hover {
       background: #7CFF5B;
       color: #005343 !important;
       transform: translateY(-2px);
   }

   .promotion-list .carousel-inner {
       padding: 40px 50px 80px 50px;
   }

   @media (max-width: 1200px) {
       .promotion-list .carousel-inner {
           padding: 30px 30px 60px 30px;
       }
   }

   @media (max-width: 768px) {
       .promotion-list {
           padding: 40px 0;
       }

       .promotion-list .carousel-inner {
           padding: 20px 15px 50px 15px;
       }

       .promotion {
           text-align: center;
           padding-bottom: 20px;
       }

       .promotion-icon img {
           margin-bottom: 20px;
       }

       .promotion-title {
           font-size: 28px;
       }

       .promotion-card {
           border-radius: 14px;
           box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
       }

       .promotion-image {
           height: 240px;
       }

       .promotion-content {
           padding: 16px;
       }

       .promotion-title-card {
           font-size: 16px;
           margin-bottom: 10px;
       }

       .promotion-date small {
           font-size: 12px;
       }

       .promotion-footer {
           padding: 12px 16px 16px;
       }

       .btn-promotion-detail {
           padding: 9px 14px;
           font-size: 13px;
       }
   }

   @media (max-width: 576px) {
       .promotion-list .carousel-inner {
           padding: 15px 10px 40px 10px;
       }

       .promotion-image {
           height: 200px;
       }

       .promotion-content {
           padding: 14px;
       }

       .promotion-title-card {
           font-size: 15px;
           margin-bottom: 8px;
           -webkit-line-clamp: 2;
       }

       .promotion-date small {
           font-size: 11px;
       }

       .promotion-footer {
           padding: 10px 14px 14px;
       }

       .btn-promotion-detail {
           padding: 8px 12px;
           font-size: 12px;
       }
   }


   .promotion-detail {
       padding: 40px 0;
   }

   .promotion-detail .container-fluid {
       max-width: 1200px;
       margin: 0 auto;
   }

   /* META */
   .promotion-detail .promotion-meta {
       display: flex;
       gap: 16px;
       font-size: 0.9rem;
       color: #6c757d;
       margin-bottom: 8px;
   }

   /* TITLE */
   .promotion-detail .promotion-title {
       font-size: 2rem;
       font-weight: 700;
       line-height: 1.3;
       margin-bottom: 24px;
   }

   /* THUMBNAIL */
   .promotion-detail .promotion-thumbnail {
       aspect-ratio: 16 / 9;
       overflow: hidden;
       border-radius: 8px;
       margin-bottom: 32px;
   }

   .promotion-detail .promotion-thumbnail img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   /* CONTENT */
   .promotion-detail .promotion-content {
       font-size: 1rem;
       line-height: 1.8;
       color: #333;
   }

   .promotion-detail .promotion-content p {
       margin-bottom: 1rem;
   }

   .promotion-detail .promotion-content img {
       max-width: 100%;
       height: auto;
       border-radius: 6px;
       margin: 16px 0;
   }

   /* MOBILE */
   @media (max-width: 576px) {
       .promotion-title {
           font-size: 1.5rem;
       }

       .promotion-detail {
           padding: 24px 0;
       }
   }

   /* ======================================================================================================== */

   /* PENAWARAN DETAIL PAGE */
   .penawaran-detail-section {
       padding: 60px 0;
       background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
       min-height: calc(100vh - 300px);
   }

   .penawaran-detail-container {
       max-width: 900px;
       margin: 0 auto;
       padding: 0 20px;
   }

   /* BREADCRUMB */
   .penawaran-breadcrumb {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 24px;
       font-size: 14px;
   }

   .penawaran-breadcrumb a {
       color: #0066cc;
       text-decoration: none;
       font-weight: 500;
       transition: all 0.3s ease;
   }

   .penawaran-breadcrumb a:hover {
       color: #005343;
       text-decoration: underline;
   }

   .penawaran-breadcrumb .separator {
       color: #ddd;
       margin: 0 6px;
   }

   .penawaran-breadcrumb .current {
       color: #666;
   }

   /* HEADER */
   .penawaran-detail-header {
       margin-bottom: 40px;
       animation: fadeInDown 0.6s ease;
   }

   /* TITLE */
   .penawaran-detail-title {
       font-size: 2.5rem;
       font-weight: 800;
       color: #005343;
       line-height: 1.3;
       margin-bottom: 20px;
       word-wrap: break-word;
   }

   /* META INFO */
   .penawaran-detail-meta {
       display: flex;
       align-items: center;
       gap: 20px;
       flex-wrap: wrap;
   }

   .meta-item {
       display: flex;
       align-items: center;
       gap: 8px;
       color: #666;
       font-size: 15px;
   }

   .meta-item i {
       font-size: 18px;
       color: #7CFF5B;
   }

   /* SHARE SECTION */
   .penawaran-detail-share {
       display: flex;
       align-items: center;
       gap: 16px;
       padding: 20px;
       background: #ffffff;
       border-radius: 12px;
       margin-bottom: 40px;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
       flex-wrap: wrap;
   }

   .share-label {
       font-weight: 600;
       color: #333;
       font-size: 15px;
   }

   .share-buttons {
       display: flex;
       gap: 12px;
       flex-wrap: wrap;
   }

   .share-btn {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 10px 16px;
       border-radius: 8px;
       border: 2px solid #f0f0f0;
       background: #ffffff;
       color: #333;
       font-size: 14px;
       font-weight: 600;
       text-decoration: none;
       transition: all 0.3s ease;
       cursor: pointer;
   }

   .share-btn i {
       font-size: 18px;
   }

   .share-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }

   .share-whatsapp:hover {
       background: #25D366;
       color: #ffffff;
       border-color: #25D366;
   }

   .share-twitter:hover {
       background: #000000;
       color: #ffffff;
       border-color: #000000;
   }

   .share-copy:hover {
       background: #0066cc;
       color: #ffffff;
       border-color: #0066cc;
   }

   /* IMAGE */
   .penawaran-detail-image {
       width: 100%;
       overflow: hidden;
       border-radius: 16px;
       margin-bottom: 40px;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
       animation: fadeInUp 0.6s ease 0.2s both;
       display: block;
   }

   .penawaran-detail-image img {
       width: 100%;
       height: auto;
       display: block;
       transition: transform 0.4s ease;
   }

   .penawaran-detail-image:hover img {
       transform: scale(1.05);
   }

   /* CONTENT */
   .penawaran-detail-content {
       background: #ffffff;
       padding: 40px;
       border-radius: 16px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
       margin-bottom: 40px;
       line-height: 1.8;
       color: #444;
       font-size: 16px;
       animation: fadeInUp 0.6s ease 0.3s both;
   }

   .penawaran-detail-content h1,
   .penawaran-detail-content h2,
   .penawaran-detail-content h3,
   .penawaran-detail-content h4,
   .penawaran-detail-content h5,
   .penawaran-detail-content h6 {
       color: #005343;
       font-weight: 700;
       margin-top: 24px;
       margin-bottom: 16px;
       line-height: 1.4;
   }

   .penawaran-detail-content h1 {
       font-size: 28px;
   }

   .penawaran-detail-content h2 {
       font-size: 24px;
   }

   .penawaran-detail-content h3 {
       font-size: 20px;
   }

   .penawaran-detail-content h4 {
       font-size: 18px;
   }

   .penawaran-detail-content p {
       margin-bottom: 16px;
   }

   .penawaran-detail-content ul,
   .penawaran-detail-content ol {
       margin-left: 24px;
       margin-bottom: 16px;
   }

   .penawaran-detail-content li {
       margin-bottom: 12px;
       color: #555;
   }

   .penawaran-detail-content img {
       max-width: 100%;
       height: auto;
       border-radius: 12px;
       margin: 24px 0;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   }

   .penawaran-detail-content a {
       color: #0066cc;
       text-decoration: none;
       font-weight: 500;
       transition: all 0.3s ease;
       border-bottom: 2px solid transparent;
   }

   .penawaran-detail-content a:hover {
       color: #005343;
       border-bottom-color: #7CFF5B;
   }

   /* CTA SECTION */
   .penawaran-detail-cta {
       display: flex;
       justify-content: flex-start;
       gap: 16px;
   }

   .btn-back-promotion {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       padding: 14px 28px;
       background: linear-gradient(135deg, #005343 0%, #003d2a 100%);
       color: #7CFF5B !important;
       border: 2px solid #7CFF5B;
       border-radius: 10px;
       font-size: 15px;
       font-weight: 600;
       text-decoration: none;
       transition: all 0.3s ease;
       cursor: pointer;
   }

   .btn-back-promotion i {
       font-size: 18px;
   }

   .btn-back-promotion:hover {
       background: #7CFF5B;
       color: #005343 !important;
       transform: translateX(-4px);
   }

   /* ANIMATIONS */
   @keyframes fadeInDown {
       from {
           opacity: 0;
           transform: translateY(-20px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(20px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   /* MOBILE RESPONSIVE */
   @media (max-width: 768px) {
       .penawaran-detail-section {
           padding: 40px 0;
       }

       .penawaran-detail-container {
           padding: 0 16px;
       }

       .penawaran-detail-title {
           font-size: 1.8rem;
           margin-bottom: 16px;
       }

       .penawaran-detail-share {
           padding: 16px;
           margin-bottom: 32px;
       }

       .share-label {
           font-size: 14px;
       }

       .share-btn {
           padding: 8px 12px;
           font-size: 13px;
       }

       .share-btn i {
           font-size: 16px;
       }

       .penawaran-detail-content {
           padding: 24px;
           margin-bottom: 32px;
           font-size: 15px;
       }

       .penawaran-detail-content h1 {
           font-size: 24px;
       }

       .penawaran-detail-content h2 {
           font-size: 20px;
       }

       .penawaran-detail-content h3 {
           font-size: 18px;
       }
   }

   @media (max-width: 576px) {
       .penawaran-detail-section {
           padding: 30px 0;
       }

       .penawaran-detail-title {
           font-size: 1.5rem;
       }

       .penawaran-detail-image {
           margin-bottom: 30px;
           border-radius: 12px;
       }

       .penawaran-detail-share {
           flex-direction: column;
           align-items: flex-start;
       }

       .share-buttons {
           width: 100%;
       }

       .share-btn {
           flex: 1;
           justify-content: center;
           font-size: 12px;
       }

       .penawaran-detail-content {
           padding: 20px;
           margin-bottom: 24px;
       }

       .penawaran-detail-content h1 {
           font-size: 20px;
       }

       .penawaran-detail-content h2 {
           font-size: 18px;
       }

       .penawaran-detail-content h3 {
           font-size: 16px;
       }

       .btn-back-promotion {
           padding: 12px 20px;
           font-size: 13px;
       }
   }

   /* ======================================================================================================== */