/* Pastikan semua konten berada di bawah navbar fixed */

.title-head {
    position: fixed;         /* Membuat title-head tetap di atas */
    top: 60px;               /* Menyesuaikan dengan jarak dari navbar */
    left: 0;
    right: 0;
    padding: 15px;
    background-color: #f8f9fa;  /* Bisa diganti dengan warna latar belakang yang diinginkan */
    border-bottom: 1px solid #ddd; /* Garis bawah untuk pemisahan */
    font-size: 20px;
    text-align: center;
    z-index: 999;  /* Menjamin agar title-head tetap di atas konten lainnya */
    width: 100%;    /* Membuat lebar 100% */
    box-sizing: border-box;
}

/* Menambahkan margin-top pada konten agar tidak tertutup oleh title-head yang fixed */
.wrapper {
    margin-top: 100px;  /* Menyesuaikan jarak agar tidak tertutup oleh fixed title-head */
}

@media screen and (max-width: 1250px) {
	div.wrapper {
		width: 1000px;
	}

	div.wrapper div.core {
		width: 1000px;
	}

	div.wrapper div.core div.main-product {
		margin-left: 50px;
		width: 850px;
	}

	div.wrapper div.core div.main-product div.card {
		margin-bottom: 20px;
		width: 159px;
	}
}

@media screen and (max-width: 1050px) {
	div.wrapper {
		width: 800px;
	}

	div.wrapper div.core {
		width: 800px;
	}

	div.wrapper div.core div.main-product {
		margin-left: 18px;
		margin-top: 0;
		width: 600px;
	}

	div.wrapper div.core div.main-product div.card {
		width: 159px;
	}
}

@media screen and (max-width: 850px) {
	div.wrapper {
		width: 600px;
	}

	div.wrapper div.core {
		width: 600px;
		margin-top: 180px;
	}

	div.wrapper div.core div.main-product {
		margin-top: 0;
		margin-left: 20px;
		width: 400px;
	}

	div.wrapper div.core div.main-product div.card {
		width: 152px;
	}
}

@media screen and (max-width: 800px) {
	div.wrapper {
		width: 95%;
	}

	div.wrapper div.core {
		display: block;
		width: 95%;
		margin-top: 120px;
	}

	div.wrapper div.core div.filter {
		display: none;
	}

	div.wrapper div.core div.main-product {
		justify-content: space-between;
		margin: 0;
		width: 100%;
	}

	div.wrapper div.core div.main-product div.card {
		height: auto;
		width: 150px;
	}
}

@media screen and (max-width: 600px) {
	div.wrapper div.core div.main-product {
		display: block;
	}

	div.wrapper div.core div.main-product div.card {
		float: left;
		margin: 0 4%;
		margin-bottom: 20px;
		width: 42%;
		
	}
}

/* Responsif pada ukuran layar besar (lebih dari 1250px) */
@media screen and (min-width: 1250px) {
    .title-head h2 {
        font-size: 30px;
    }
}

/* Responsif pada ukuran layar antara 1150px - 1250px */
@media screen and (max-width: 1250px) and (min-width: 1150px) {
    .title-head h2 {
        font-size: 26px;
    }
}

/* Responsif pada ukuran layar antara 1050px - 1150px */
@media screen and (max-width: 1150px) and (min-width: 1050px) {
    .title-head h2 {
        font-size: 24px;
    }
}

/* Responsif pada ukuran layar antara 800px - 1050px */
@media screen and (max-width: 1050px) and (min-width: 800px) {
    .title-head h2 {
        font-size: 22px;
    }
}

/* Responsif pada ukuran layar kecil (800px - 600px) */
@media screen and (max-width: 800px) {
    .title-head {
        padding: 10px;
    }
    
    .title-head h2 {
        font-size: 20px; /* Ukuran font sedikit lebih kecil di layar kecil */
        text-align: left; /* Mengatur teks agar lebih rapi di kiri */
        padding-left: 15px; /* Memberikan sedikit jarak ke kiri */
    }
}

/* Responsif pada ukuran layar sangat kecil (di bawah 600px) */
@media screen and (max-width: 600px) {
    .title-head {
        padding: 8px;
    }

    .title-head h2 {
        font-size: 18px; /* Ukuran font lebih kecil pada layar sangat kecil */
        text-align: left; /* Menjaga agar teks lebih rapi */
        padding-left: 10px; /* Sedikit jarak ke kiri */
    }
}
/* Untuk memastikan bahwa .core dan elemen lainnya memiliki margin-top yang cukup */
.core {
    margin-top: 180px; /* Memberikan jarak yang cukup agar tidak tertutup oleh title-head */
}

/* Untuk elemen lainnya yang mengikuti title-head */
.filter, .main-product {
    margin-top: 20px;  /* Menjaga jarak antar elemen agar tidak bertumpuk */
}