/* Responsive CSS menggunakan satuan persentase (%) */

/* Base */
* {
  box-sizing: border-box;
}

/* Container - menggunakan persentase */
.container {
  width: 100%;
  max-width: 100%;
  padding-left: 2%;
  padding-right: 2%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .container {
    max-width: 90%;
    padding-left: 2%;
    padding-right: 2%;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 90%;
    padding-left: 2%;
    padding-right: 2%;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Typography - menggunakan persentase relatif */
body {
  font-size: 100%;
}

h1 {
  font-size: 300%;
}

h2 {
  font-size: 200%;
}

h3 {
  font-size: 150%;
}

h4 {
  font-size: 112.5%;
}

p {
  font-size: 100%;
  line-height: 160%;
}

/* Padding & Margin - menggunakan persentase */
.padding {
  padding-top: 5.625%;
  padding-bottom: 5.625%;
}

.padding-top {
  padding-top: 5.625%;
}

.padding-bottom {
  padding-bottom: 5.625%;
}

.padding-bottom-half {
  padding-bottom: 2.8125%;
}

.heading_space {
  margin-bottom: 2.8125%;
}

.bottom25 {
  margin-bottom: 1.5625%;
}

.top25 {
  margin-top: 1.5625%;
}

.top30 {
  margin-top: 1.875%;
}

.margin_tophalf {
  margin-top: 2.8125%;
}

.margin10 {
  margin-top: 0.9375%;
}

.bottom5 {
  margin-bottom: 0.3125%;
}

.margin_top {
  margin-top: 5.625%;
}

.bottom20 {
  margin-bottom: 1.25%;
}

.top20 {
  margin-top: 1.25%;
}

.bottom15 {
  margin-bottom: 0.9375%;
}

.no_bottom {
  margin-bottom: 0;
}

.half_space {
  margin-bottom: 1.25%;
}

/* Images - menggunakan persentase */
img {
  max-width: 100%;
  height: auto;
}

.img-responsive {
  width: 100%;
  height: auto;
}

/* Buttons - menggunakan persentase */
.btn_common {
  padding: 0.875% 1.75%;
  font-size: 100%;
  display: inline-block;
}

/* Navbar Logo - disesuaikan ukurannya */
.navbar-brand {
  padding: 0.5% 0;
  height: auto;
}

.navbar-brand .logo {
  max-width: 180px;
  width: auto;
  height: auto;
}

@media (max-width: 1200px) {
  .navbar-brand .logo {
    max-width: 160px;
  }
}

@media (max-width: 992px) {
  .navbar-brand .logo {
    max-width: 150px;
  }
}

@media (max-width: 768px) {
  .navbar-brand .logo {
    max-width: 130px;
  }
}

@media (max-width: 480px) {
  .navbar-brand .logo {
    max-width: 120px;
  }
}

/* Grid spacing - menggunakan persentase */
.row {
  margin-left: -0.75%;
  margin-right: -0.75%;
}

[class*="col-"] {
  padding-left: 0.75%;
  padding-right: 0.75%;
}

/* Sections - menggunakan persentase untuk spacing */
section {
  width: 100%;
}

section:not(.rev_slider_wrapper) {
  padding: 5.625% 0;
}

/* Topbar - menggunakan persentase - garis tepi diperkecil */
.topbar {
  padding: 0.75% 0;
  font-size: 87.5%;
}

/* Footer - menggunakan persentase */
footer {
  padding-top: 5.625%;
}

.footer_panel {
  margin-bottom: 1.5625%;
}

.copyright {
  padding: 1.5% 0;
  font-size: 87.5%;
}

/* Icon boxes - menggunakan persentase */
.icon_box {
  padding: 1.5%;
  margin-bottom: 2%;
}

.icon_box i {
  font-size: 300%;
  margin-bottom: 1.25%;
}

/* About section - menggunakan persentase */
.about-post {
  margin-bottom: 1.5%;
}

.about-post img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1%;
}

/* Courses - menggunakan persentase */
.course-item {
  margin-bottom: 2%;
}

/* Pricing - menggunakan persentase */
.pricing_item {
  padding: 2.5%;
  margin-bottom: 1.5%;
}

.pricing_price {
  font-size: 300%;
  margin: 1.5% 0;
}

/* Reviews - menggunakan persentase */
.client_pic {
  width: 8%;
  height: auto;
  border-radius: 50%;
  margin: 1.5% auto;
}

@media (max-width: 768px) {
  .client_pic {
    width: 15%;
  }
}

/* News - menggunakan persentase */
.news_box {
  padding: 1.5%;
  margin-top: -1.5%;
}

/* Border radius - menggunakan persentase */
.border_radius {
  border-radius: 0.5%;
}

/* Forms - menggunakan persentase */
.form-control {
  padding: 0.875% 1%;
  font-size: 100%;
  border-radius: 0.25%;
  width: 100%;
}

/* Tables - menggunakan persentase */
table {
  width: 100%;
  font-size: 100%;
}

table th,
table td {
  padding: 0.875%;
}

/* Lists - menggunakan persentase */
ul, ol {
  padding-left: 2%;
  margin-bottom: 1.25%;
}

li {
  margin-bottom: 0.6%;
  font-size: 100%;
}

/* Social icons - menggunakan persentase */
.social_icon li {
  margin: 0 0.5%;
}

.social_icon li a {
  width: 2.5%;
  height: 2.5%;
  font-size: 125%;
  display: inline-block;
}

@media (max-width: 768px) {
  .social_icon li a {
    width: 5%;
    height: 5%;
  }
}

/* Scroll to top button - menggunakan persentase */
.scrollToTop {
  width: 3%;
  height: 3%;
  font-size: 150%;
  bottom: 2%;
  right: 2%;
}

@media (max-width: 768px) {
  .scrollToTop {
    width: 5%;
    height: 5%;
    bottom: 3%;
    right: 3%;
  }
}

/* Divider - menggunakan persentase */
.divider-left,
.divider-center {
  width: 4.375%;
  height: 0.25%;
}

/* Media queries untuk berbagai ukuran layar */
@media (max-width: 576px) {
  body {
    font-size: 87.5%;
  }
  
  h1 {
    font-size: 250%;
  }
  
  h2 {
    font-size: 175%;
  }
  
  h3 {
    font-size: 137.5%;
  }
  
  .container {
    padding-left: 3%;
    padding-right: 3%;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  body {
    font-size: 93.75%;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  body {
    font-size: 100%;
  }
}

@media (min-width: 993px) {
  body {
    font-size: 100%;
  }
}

/* Utility classes */
.text-center {
  text-align: center;
}

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

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

/* Pastikan tidak ada horizontal scroll */
body {
  overflow-x: hidden;
  width: 100%;
}

/* Pastikan semua elemen menggunakan box-sizing border-box */
*,
*::before,
*::after {
  box-sizing: border-box;
}