:root {
    /* color */
    --ocean-blue: #1B3A4B;
    --sky-blue: #4A90E2;
    --golden-sunset: #F4A261;
    --sand-beige: #EBD9B4;
    --pearl-white: #FAF9F6;
    --black: #000;
    --white: #fff;
	--grey: #C1BAA1;
    --text-grey: #6C757D;

    /* font */
    --poppins: 'Poppins', sans-serif;
    --nunito: 'Nunito', sans-serif;

    /* padding */
    --section-padding: 50px;
    --button-padding: 5px 20px;

	/*font weight*/
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.section {
    padding: 10rem 0 1rem;
    margin-bottom: var(--section-padding);
}

.sticky-topp {
    top: 0;
    z-index: 1020;
    background-color: var(--ocean-blue) !important;
    transition: 0.3s ease;
    padding: 10px;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
}

.details__group p {
    font-family: var(--nunito);
    font-size: 1rem;
    color: var(--grey);
    margin: .5rem 0;
}

.course_description .details__title {
    font-family: var(--poppins);
    font-size: 1.8rem;
    font-weight: var(--font-semibold);
    color: var(--black);
    margin: 2rem 0 1rem 0;
}

.course_description p {
    font-family: var(--nunito);
    font-size: 1rem;
    color: var(--text-grey);
    margin-bottom: 1.5rem;
}

.course_description h4 {
    font-family: var(--poppins);
    font-size: 1.2rem;
    font-weight: var(--font-semibold);
    color: var(--black);
    margin: 1.5rem 0 1rem 0;
}

.course_description i {
    font-size: 1rem;
    color: var(--text-grey);
}

/* Container Utama */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: repeat(2, 200px); 
    gap: 10px; /* Jarak antar gambar */    
    border-radius: 12px; 
    overflow: hidden; /* Memotong gambar yang keluar dari radius */
    max-width: 1400px; /* Lebar maksimal layout */
    margin: 0 auto;
}

/* Style Umum untuk Item */
.gallery-item {
    position: relative;
    width: 100%;
    height: 100%;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* PENTING: Agar gambar tidak gepeng/terdistorsi */
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Efek Hover pada Gambar */
.gallery-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Warna putih transparan 50% sesuai request */
    background-color: rgba(255, 255, 255, 0.5); 
    opacity: 0; /* Mulai dengan tidak terlihat */
    transition: opacity 0.3s ease; /* Transisi halus saat muncul/hilang */
    z-index: 1; /* Pastikan dia di atas gambar */
    pointer-events: none; /* Agar klik tetap tembus ke gambar/link di bawahnya */
}

/* 3. Saat .gallery-item di-hover, ubah opacity elemen palsu tadi menjadi 1 (terlihat).
*/
.gallery-item:hover::after {
    opacity: 1;
}

.main-img {
    /* Span 2 kolom (lebar) dan 2 baris (tinggi) */
    grid-column: span 2; 
    grid-row: span 2;
}

/* --- TOMBOL "+17" (Overlay) --- */
.overlay-container {
    position: relative;
    width: 100%;
    height: 100%;
}
.more-photos {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Gelap transparan */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2rem;
    pointer-events: none; /* Agar klik tembus ke gambar jika perlu */
}

.map-card {
    width: 100%;
    max-width: 600px; /* Batas lebar agar tidak terlalu panjang */
    border: 1px solid #ddd; /* Garis pinggir tipis */
    border-radius: 12px; /* Sudut melengkung */
    overflow: hidden; /* Agar isi tidak keluar dari sudut melengkung */
    font-family: sans-serif;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Bayangan halus opsional */
    background-color: #fcfcfc; /* Warna dasar */
}

/* --- BAGIAN ATAS (VISUAL PETA) --- */
.map-visual {
    height: 180px; 
    width: 100%;
    background-color: #eee;
    overflow: hidden;
}

.map-info {
    padding: var(--button-padding);
    background: var(--white);
    font-family: var(--nunito);
}

.map-info p {
    color: var(--black);
}

.details__price-card {
    background-color: var(--white);
    padding: 1rem 1.5rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 1.5rem;
}

.details__price-card h3 {
    font-family: var(--poppins);
    font-size: 1.5rem !important;
    font-weight: var(--font-bold);
    color: var(--black);
}

.details__price-card .price {
    border-bottom: 1px solid #ddd;
}

.details__price-card p.figcaption {
    font-family: var(--nunito);
    font-size: 0.8rem !important;
    color: var(--white);
    background-color: rgba(255, 0, 0, .5);
    margin: 0 !important;
    padding: 5px 15px;
    border-radius: 4px;
}

.btn-blue {
  background: var(--sky-blue);
  color: #fff;
  border: none;
  padding: var(--button-padding);
  font-family: var(--nunito);
  transition: all 0.25s ease;
    border: 2px solid var(--sky-blue);

}

.btn-blue:hover {
  background: transparent;
  color: var(--sky-blue);
  border: 2px solid var(--sky-blue);
}

.btn-white {
  background: var(--ocean-blue);
  color: #fff;
  border: none;
  padding: var(--button-padding);
  font-family: var(--nunito);
  transition: all 0.25s ease;
  border: 2px solid var(--ocean-blue);

}

.btn-white:hover {
  background: var(--black);
  color: #fff;
  border: none;
  padding: var(--button-padding);
  font-family: var(--nunito);
  border: 2px solid var(--black);
}