html {
scroll-behavior: smooth !important;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth!important;
}
/* [data-aos] {
padding: 20px !important;
margin: 0 !important;
} */
.my-container {
width: 100%;
overflow: hidden;
}
/* Navbar styles */
.custom-navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(0, 0, 0, 0.25);
padding: 1rem 3%;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.logo {
width: 118px;
height: auto;
margin-left: 15px;
cursor: pointer;
}
.navbar-toggler.menu-toggle {
display: flex;
flex-direction: column;
border: none;
background: none;
padding: 0;
display: none;
}
.menu-toggle span {
width: 25px;
height: 3px;
background-color: white;
margin: 2px 0;
transition: all 0.3s ease;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 1rem;
}
.nav-links a {
text-decoration: none;
color: white !important;
font-weight: 500;
font-size: 1rem;
}
.nav-links a:hover {
color: rgba(44, 145, 68, 1) !important;
}
.search-icon-mobile a:hover {
color: rgba(44, 145, 68, 1) !important;
}
@media (max-width: 1366px) {
.custom-navbar {
padding: 1rem 1%;
}
.nav-links {
flex-direction: row;
position: static;
background-color: transparent;
width: auto;
text-align: left;
}
.nav-links li {
margin-left: 0.2rem;
}
.nav-links a {
font-size: 0.8rem;
white-space: nowrap;
}
.logo {
max-width: 3.5rem;
margin-left: 15px;
}
}
/* Responsive overrides if needed */
@media (max-width: 1023px) {
.navbar-toggler.menu-toggle {
display: block!important;
}
.menu-toggle span{
display: block !important;
}
.nav-links {
flex-direction: column;
background-color: rgba(87, 86, 86, 0.1);
width: 100%;
text-align: center;
}
.nav-links li {
margin: 1rem 0;
}
.logo {
margin-left: 10px;
max-width: 4rem;
}
.search-icon-mobile {
display: block;
margin-left: auto;
margin-right: 1rem;
}
.search-icon-mobile a {
color: white;
padding: 0.5rem;
font-size: 0.8rem;
}
.search-icon {
display: none !important; /* Sembunyikan yang di dalam menu */
}
}
.act-btn{
display: block;
width: 134px;
height: 153px;
position: fixed;
right: 50px;
bottom:30px;
z-index: 9999;
}
.act-btn img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 768px) {
.act-btn {
width: 120px;
height: 130px;
right: 40px;
bottom: 40px;
}
}
@media (max-width: 560px) {
.act-btn {
width: 80px;
height: 100px;
right: 30px;
bottom: 20px;
}
}
/* Search styles */
.search-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.search-overlay.active {
opacity: 1;
visibility: visible;
}
.search-form {
width: 80%;
max-width: 600px;
position: relative;
}
.search-form input {
width: 100%;
padding: 1rem 3rem 1rem 1rem;
font-size: 1.2rem;
border: none;
border-radius: 5px;
background-color: white;
}
.search-form button[type="submit"] {
position: absolute;
right: 40px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
}
#close-search {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: #333;
}
/* Hero section styles */
/* Hero section styles */
.hero {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
padding: 0 5%;
position: relative;
overflow: hidden;
}
/* Carousel container styles */
.carousel-my-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;
background-color: black;
}
/* Carousel slide styles - Updated for responsive backgrounds */
/* .carousel-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1s ease-in-out;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
} */
.carousel-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1s ease-in-out;
}
/* Tambahan untuk gradient overlay */
.carousel-slide::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Active slide */
.carousel-slide.active {
opacity: 1;
}
.swiper-button-prev-hero,
.swiper-button-next-hero{
color: #2C9144 !important; /* Warna tombol */
width: 40px;
height: 40px;
border-radius: 50%;
z-index: 10;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
@media (max-width: 1366px) {
.hero {
height: 726px;
}
}
@media (max-width: 1024px) {
.hero {
height: 500px; /* Reduce height on smaller devices */
max-width: 100%;
}
.carousel-my-container {
height: 500px; /* Reduce height on smaller devices */
max-width: 100%;
}
.hero h1 {
font-size: 2.5rem; /* Smaller heading on mobile */
}
.hero p {
font-size: 1.2rem; /* Smaller text on mobile */
}
.carousel-button {
width: 40px;
height: 40px;
font-size: 1.5rem;
}
}
/* Responsive adjustments */
@media (min-width: 601px) and (max-width: 820px) {
.hero {
height: 40vh; /* Reduce height on smaller devices */
max-width: 100%;
}
.carousel-my-container {
height: 40vh; /* Reduce height on smaller devices */
max-width: 100%;
}
.hero h1 {
font-size: 2rem; /* Smaller heading on mobile */
}
.hero p {
font-size: 1rem; /* Smaller text on mobile */
}
.carousel-button {
width: 30px;
height: 30px;
font-size: 1rem;
}
}
@media (min-width: 360px) and (max-width: 600px) {
.hero {
height: 30vh; /* Reduce height on smaller devices */
max-width: 100%;
}
.carousel-my-container {
height: 30vh; /* Reduce height on smaller devices */
max-width: 100%;
}
.carousel-button {
width: 30px;
height: 30px;
font-size: 1rem;
}
}
/* Company Overview */
.company-overview {
height: 708px;
width: auto;
display: flex;
align-items: center;
justify-content: left;
text-align: left;
color: white;
padding: 0 5%;
position: relative;
overflow: hidden;
}
.company-overview h1 {
font-size: 2.5rem !important;
margin-bottom: 1rem;
font-weight: normal;
font-style: italic;
}
.company-overview h1 .bold {
font-weight: bold;
font-size: inherit;
}
.company-overview p {
font-size: 1rem;
margin-bottom: 1rem;
font-weight: normal;
}
.hero-content {
max-width: 600px;
z-index: 2;
position: relative;
}
.carousel-company-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1s ease-in-out;
/* Dark overlay for better text readability */
}
.cta-button {
padding: 8px 15px;
background-color: rgba(44, 145, 68, 1);
color: white;
border: none;
border-radius: 15px;
cursor: pointer;
text-decoration: none;
}
.cta-button:hover {
text-decoration: none; /* hilangin underline saat hover */
color: white; /* tetap putih saat hover */
}
/* Active slide */
.carousel-company-slide.active {
opacity: 1;
}
@media (min-width: 820px) and (max-width: 1366px) {
.company-overview {
width: 1442px; /* Reduce height on smaller devices */
height: 656px;
}
.hero-content {
max-width: 600px;
}
.company-overview h1 {
font-size: 2.5rem; /* Smaller heading on mobile */
}
.company-overview p {
font-size: 1rem; /* Smaller text on mobile */
}
}
@media screen and (min-width: 601px) and (max-width: 819px) {
.company-overview {
width: 100%;
height: 295px; /* Reduce height on smaller devices */
}
.hero-content {
max-width: 400px;
}
.company-overview h1 {
font-size: 1.8rem !important; /* Smaller heading on mobile */
}
.company-overview p {
font-size: 0.8rem; /* Smaller text on mobile */
}
}
@media screen and (min-width: 360px) and (max-width: 600px) {
.company-overview {
width: 100%;
height: 250px; /* Reduce height on smaller devices */
}
.hero-content {
max-width: 300px;
}
.carousel-container {
height: 30vh;
}
.hero-content h1 {
font-size: 1.5rem !important; /* Smaller heading on mobile */
}
.hero-content p {
font-size: 0.6rem; /* Smaller text on mobile */
}
.cta-button{
padding: 4px 7px;
font-size: 0.6rem;
}
}
/* Section common styles */
section {
padding: 80px 5%;
}
section h2 {
text-align: center;
margin-bottom: 40px;
font-size: 2.5rem;
color: #333;
font-weight: normal;
}
section h2 .italic {
font-style: italic;
}
section h2 .bold {
font-weight: bold;
}
/* About section styles */
/* About section styles - keeping your original styles */
.about-section {
padding: 10px 20px;
text-align: center;
}
.about-section h2 {
margin-bottom: 30px;
font-size: 2rem;
}
.poppins-bold {
font-family: "Poppins", sans-serif;
font-weight: 700;
}
.italic {
font-style: italic;
}
/* Desktop Grid View - keeping your original styles */
.logo-content {
display: flex;
justify-content: center;
padding: 20px;
}
.column-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
}
.column-content img {
width: 115px;
height: 115px;
object-fit: contain;
}
.logo-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Logo year text */
.logo-year {
margin-top: 5px;
font-size: 14px;
font-weight: bold;
color: #333;
}
/* Mobile View - Logo Grid Styling */
.logo-transform-mobile {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 20px 0;
}
.logo-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.logo-grid img,
.empty-placeholder {
width: 60px;
height: 60px;
object-fit: contain;
}
/* Swiper Specific Styles - New */
.logo-transform-carousel {
width: 100%;
margin: 0 auto;
position: relative;
padding-bottom: 40px; /* Space for pagination */
}
/* Show/Hide based on screen size */
.mobile-view-logo {
display: none;
}
.desktop-view-logo {
display: block;
}
@media (max-width: 1024px){
.mobile-view-logo {
display: none;
}
.desktop-view-logo {
display: block;
}
.logo-content {
display: flex;
justify-content: center;
padding: 15px;
}
.column-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.column-content img {
width: 80px;
height: 80px;
object-fit: contain;
}
}
@media (max-width: 835px) {
.mobile-view-logo {
display: none;
}
.desktop-view-logo {
display: block;
}
.logo-content {
display: flex;
justify-content: center;
padding: 15px;
}
.column-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.column-content img {
width: 70px;
height: 70px;
object-fit: contain;
}
}
/* Media Query for Mobile */
@media (max-width: 768px) {
.column-content img {
width: 30px;
height: 30px;
object-fit: contain;
}
.logo-year {
font-size: 10px;
}
.mobile-view-logo {
display: block;
}
.desktop-view-logo {
display: none;
}
.logo-pagination {
display: flex;
justify-content: center;
gap: 5px;
margin-top: 15px;
}
.logo-pagination .swiper-pagination-bullet {
width:8px;
height: 8px;
background-color: grey !important;
opacity: 0.6;
transition: all 0.3s ease;
}
.logo-pagination .swiper-pagination-bullet-active {
background-color: grey !important;
opacity: 1;
}
}
/*Perjalanan Perusahaan*/
.about-content {
display: flex;
justify-content: center;
padding: 20px;
margin-bottom: 15px;
}
.column-about {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 50px;
row-gap: 105px; /* Bisa ditambah khusus jarak antar baris */
}
.image-block {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
width: 200px;
margin-bottom: 30px;
transition: transform 0.3s ease;
}
.timeline-image {
width: 200px;
height: 200px;
object-fit: contain;
margin-bottom: 20px;
}
.per-button {
padding: 10px 20px;
font-size: 1rem;
background-color: rgba(44, 145, 68, 1);
color: white;
border: none;
border-radius: 50px;
z-index: 2;
}
.timeline-image,
.per-button {
transition: transform 0.3s ease;
}
.image-block:hover .timeline-image {
transform: scale(1.05);
}
.image-block:hover .per-button {
transform: scale(1.1);
}
.image-block:hover {
transform: scale(1.25);
}
.hover-text {
display: none;
position: absolute;
top: calc(90% + 25px);
left: 50%;
transform: translateX(-50%);
width: 400px;
padding: 15px;
z-index: 100;
text-align: center;
}
.hover-text p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: black;
font-style: italic;
}
/* Show text only on hover */
.image-block:hover .hover-text {
display: block;
}
/* Mobile Carousel Styles */
.mobile-carousel-container {
display: none;
width: 100%;
padding: 0 15px;
margin-top: 20px;
}
.swiper-container-timeline-carousel .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
}
.swiper-container-timeline-carousel .image-block {
width: 100%;
text-align: center;
}
.swiper-container-timeline-carousel .image-block p {
margin-top: 15px;
font-size: 0.8rem;
text-align: center;
max-width: 300px;
}
.swiper-container-timeline-carousel {
text-align: center;
}
.swiper-container-timeline-carousel .swiper-pagination-timeline {
background-color: gray !important;
}
@media (max-width: 1024px){
.column-about {
gap: 15px;
row-gap: 30px; /* Bisa ditambah khusus jarak antar baris */
flex-wrap: nowrap;
}
.image-block {
width: 150px;
margin-bottom: 30px;
transition: transform 0.3s ease;
}
.timeline-image {
width: 120px;
height: 120px;
}
.per-button {
padding: 5px 10px;
}
.timeline-image,
.per-button {
transition: transform 0.3s ease;
}
.image-block:hover .timeline-image {
transform: scale(1.05);
}
.image-block:hover .per-button {
transform: scale(1.1);
}
.image-block:hover {
transform: scale(1.25);
}
.hover-text {
top: calc(90% + 25px);
left: 50%;
transform: translateX(-50%);
width: 250px;
padding: 15px;
z-index: 100;
text-align: center;
}
.hover-text p {
margin: 0;
font-size: 10px;
line-height: 1.6;
color: black;
font-style: italic;
}
}
@media (max-width: 835px){
.column-about {
gap: 30px;
row-gap: 10px; /* Bisa ditambah khusus jarak antar baris */
}
.image-block {
width: 100px;
margin-bottom: 30px;
transition: transform 0.3s ease;
}
.timeline-image {
width: 90px;
height: 90px;
}
.per-button {
padding: 5px 10px;
}
.timeline-image,
.per-button {
transition: transform 0.3s ease;
}
.image-block:hover .timeline-image {
transform: scale(1.05);
}
.image-block:hover .per-button {
transform: scale(1.1);
}
.image-block:hover {
transform: scale(1.25);
}
.hover-text {
top: calc(90% + 25px);
left: 50%;
transform: translateX(-50%);
width: 250px;
padding: 15px;
z-index: 100;
text-align: center;
}
.hover-text p {
margin: 0;
font-size: 10px;
line-height: 1.6;
color: black;
font-style: italic;
}
}
/* Responsive Breakpoints */
@media screen and (min-width: 360px) and (max-width: 768px) {
.desktop-view {
display: none;
}
.perusahaan-section{
padding: 0px 0px;
}
.mobile-carousel-container {
display: block;
width: 100%;
}
.swiper-container-timeline-carousel .image-block img {
margin-top: 5px;
width: 130px;
height: 130px;
}
/* Nonaktifkan hover scaling pada gambar dan tombol */
.image-block:hover .timeline-image,
.image-block:hover .per-button,
.image-block:hover {
transform: none !important;
}
/* Sembunyikan teks hover di mobile */
.hover-text {
display: none !important;
position: static;
transform: none;
width: auto;
padding: 0;
}
.image-block:hover .hover-text {
display: none !important;
}
/* Jika ingin tampilkan teks biasa di bawah gambar */
.image-block p {
display: block;
font-size: 0.85rem;
line-height: 1.5;
color: black;
font-style: normal;
text-align: center;
}
/* Reset padding dan margin bila perlu */
.image-block {
margin-bottom: 20px;
transform: none !important;
}
.swiper-pagination-timeline {
display: flex;
justify-content: center;
margin-top: 0px;
gap: 5px;
}
.swiper-pagination-timeline .swiper-pagination-bullet {
width: 8px;
height: 8px;
background-color: grey !important;
opacity: 0.6;
transition: all 0.3s ease;
}
.swiper-pagination-timeline .swiper-pagination-bullet-active {
background-color: gray !important; /* Atau grey tua sesuai selera */
opacity: 1;
}
}
/*map*/
#map {
height: 100vh;
/* or specific height like 500px */
width: 100%;
}
.leaflet-container {
background: none !important;
}
/* Optional: Style for popup */
.leaflet-popup-content-wrapper {
background: #fff;
border-radius: 8px;
padding: 10px;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}
.leaflet-popup-content {
margin: 8px;
line-height: 1.4;
}
/* Optional: Hover effect for markers */
.leaflet-marker-icon:hover {
transform: scale(1.1);
transition: transform 0.2s;
}
@media screen and (max-width: 768px) {
#map {
height: 200px !important; /* atau lebih kecil sesuai kebutuhan */
}
}
/*Distribusi*/
.column-distribusi {
display: flex;
flex-wrap: wrap; /* Biar bisa pindah baris */
justify-content: center;
}
.column-distribusi img {
width: 100%;
max-width: auto; /* Ukuran maksimal gambar */
height: auto;
object-fit: contain;
}
/* Products section styles */
.anchor-point {
position: relative;
top: -80px;
visibility: hidden;
}
.product-item {
transition: transform 0.3s;
position: relative;
overflow: visible; /* pastikan item tidak memotong anaknya */
z-index: 1;
}
.normal-image, .hover-image {
width: 200px !important; /* Control image width */
height: 200px !important; /* Control image height */
object-fit: contain;
cursor: default;
}
.hover-image {
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
z-index: 2;
pointer-events: none;
}
.product-item:hover .normal-image {
opacity: 0;
}
.product-item:hover .hover-image {
opacity: 1;
transform: scale(2);
z-index: 10;
}
/* Custom Swiper styling */
.swiper-container {
padding: 0 0;
overflow: hidden;
margin: 0 0 0 0;
}
.product-name {
font-family: "Poppins", sans-serif;
font-size: 1.5rem;
}
/* Force items to display in a single row */
.product-row {
display: flex;
flex-wrap: wrap; /* ❗ penting agar bisa ke baris baru */
gap: 25px;
justify-content: center; /* opsional, agar rata tengah */
padding-bottom: 15px;
}
/* Make each column flex-shrink to fit */
.product-row .col {
flex: 0 0 auto;
width: auto;
max-width: none;
padding: 0 10px;
}
.product-name{
cursor: default;
}
/*Tematik Section*/
.tematik-section {
background-color: rgba(248, 248, 248, 1);
padding: 60px 20px; /* tambahan padding supaya konten tidak terlalu mepet */
}
.tematik-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 150px;
}
.image-block-tematik {
display: flex;
flex-direction: column; /* Gambar di atas, button di bawah */
align-items: center; /* Biar tombol dan gambar di tengah */
}
.image-block-tematik img {
width: 100%;
max-width: 100%; /* Ukuran maksimal gambar */
height: auto;
object-fit: contain;
margin-bottom: 20px;
cursor: default;
}
.only-desktop {
display: block;
}
.button-container {
text-align: right;
margin-top: 20px;
padding: 0 20px;
}
.product-btn {
padding: 8px 15px;
background-color: rgba(44, 145, 68, 1);
color: white;
border: none;
border-radius: 15px;
cursor: pointer;
text-decoration: none;
}
.product-btn:hover {
text-decoration: none;
color: white;
}
@media (max-width: 1024px) {
.product-row {
display: flex;
flex-wrap: nowrap; /* ❗ penting agar bisa ke baris baru */
gap: 10px;
justify-content: center; /* opsional, agar rata tengah */
padding-bottom: 15px;
}
.normal-image, .hover-image{
width: 150px !important; /* Control image width */
height: 150px !important; /* Control image height */
object-fit: contain;
}
/* Make each column flex-shrink to fit */
.product-row .col {
flex: 0 0 auto;
width: auto;
max-width: none;
padding: 0 10px;
}
.product-name {
font-size: 1rem;
}
.product-btn {
border-radius: 20px;
}
}
@media (max-width:835px){
.product-row {
display: flex;
flex-wrap: nowrap; /* ❗ penting agar bisa ke baris baru */
gap: 8px;
justify-content: center; /* opsional, agar rata tengah */
padding-bottom: 15px;
}
.normal-image, .hover-image{
width: 130px !important; /* Control image width */
height: 130px !important; /* Control image height */
object-fit: contain;
}
/* Make each column flex-shrink to fit */
.product-row .col {
flex: 0 0 auto;
width: auto;
max-width: none;
padding: 0 6px;
}
.product-name {
font-size: 0.8rem;
}
.product-btn {
border-radius: 20px;
}
}
/* Mobile: sembunyikan */
@media (max-width: 768px) {
.only-desktop {
display: none !important;
}
#products-section {
background-color: transparent !important;
}
.swiper-container .swiper-slide {
display: flex;
justify-content: center;
}
.swiper-container .swiper-slide a {
display: flex;
flex-direction: column;
align-items: center;
}
/* Pagination di tengah dan rapi */
.swiper-pagination-product-mobile {
display: flex;
justify-content: center;
gap: 5px;
margin-top: 15px;
}
/* Bullet default */
.swiper-pagination-product-mobile .swiper-pagination-bullet {
width: 8px;
height: 8px;
background-color: gray !important;
opacity: 0.6;
border-radius: 50%;
transition: all 0.3s ease;
}
/* Bullet aktif */
.swiper-pagination-product-mobile .swiper-pagination-bullet-active {
background-color: grey !important;
opacity: 1;
}
}
/* Official Store */
.official-store {
height: 70vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
padding: 60px 5%;
position: relative;
overflow: hidden;
}
/* Carousel background */
.carousel-container-store {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.carousel-slide-store {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.background-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Content container */
.official-store-title {
position: relative;
z-index: 2;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.official-store-title h1 {
margin-bottom: 40px;
font-size: 2.5rem;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
font-weight: 600;
}
/* Cards container */
.official-store-cards {
display: flex;
justify-content: center;
gap: 50px;
padding: 20px;
width: 100%;
}
/* Individual store card */
.image-block-official-store {
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.3s ease;
}
.image-block-official-store:hover {
transform: translateY(-5px);
}
/* Logo container */
.logo-official-store {
position: relative;
z-index: 3;
margin-bottom: 25px; /* Overlap with the circle */
}
.logo-official-store img {
width: 100px;
height: auto;
object-fit: contain;
}
/* Circle background for store icons */
.background-color-store {
background-color: white;
border-radius: 50%;
padding: 20px;
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.background-color-store img {
width: 110px;
height: auto;
object-fit: contain;
}
.official-store-desc {
font-family: "Poppins", sans-serif;
font-size: 14px;
color: white;
text-align: center;
font-weight: 500;
margin-top: 15px;
}
/* Responsive adjustments */
@media (max-width: 992px) {
.official-store-title h1 {
font-size: 2rem;
}
.official-store-cards {
gap: 30px;
}
.background-color-store {
width: 130px;
height: 130px;
}
.background-color-store img {
width: 90px;
}
}
@media (max-width: 768px) {
.official-store {
height: auto;
min-height: 100vh;
padding: 60px 20px;
}
.carousel-container-store {
height: 100%;
}
.official-store-cards {
flex-direction: column;
align-items: center;
gap: 40px;
}
.official-store-title h1 {
font-size: 1.8rem;
}
.logo-official-store img {
width: 80px;
}
.background-color-store {
width: 120px;
height: 120px;
}
}
@media (max-width: 480px) {
.official-store {
padding: 40px 15px;
}
.official-store-title h1 {
font-size: 1.5rem;
margin-bottom: 30px;
}
.logo-official-store img {
width: 70px;
}
.background-color-store {
width: 100px;
height: 100px;
padding: 15px;
}
.background-color-store img {
width: 70px;
}
}
@media (min-width: 820px) and (max-width: 1366px) {
.official-store {
height: 656px;
}
}
@media screen and (min-width: 601px) and (max-width: 819px) {
.official-store {
height: 500px;
}
}
@media screen and (min-width: 375px) and (max-width: 600px) {
.official-store {
height: 800px;
}
}
/*Kolaborasi Section */
.kolaborasi-section {
background-color: rgb(255, 255, 255);
padding: 60px 20px;
text-align: center;
}
.kolaborasi-cards {
display: flex;
justify-content: center;
}
/* Swiper container */
.swiper-kolaborasi {
width: 100%;
height: 400px;
max-width: 800px;
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
}
.carousel-slide-kolaborasi {
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.swiper-button-prev-collab,
.swiper-button-next-collab {
color: #2C9144 !important; /* Warna tombol */
width: 40px;
height: 40px;
border-radius: 50%;
z-index: 10;
}
.overlay-bottom-text {
bottom: 0;
left: 0;
padding: 1rem;
position: absolute;
}
.collab-title {
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 5px;
}
.collab-desc {
font-size: 0.8rem;
line-height: 1;
}
/* Default: tampilkan desktop, sembunyikan mobile */
.d-desktop {
display: block;
}
.swiper-pagination-collab {
display: none;
}
@media (max-width: 1367px) {
.collab-title {
font-size: 1.2rem;
}
.collab-desc {
font-size: 0.8rem;
}
}
@media (max-width: 1196px) {
.collab-title {
font-size: 1rem;
}
.collab-desc {
font-size: 0.8rem;
}
}
@media (max-width: 850px) {
.collab-title {
font-size: 1rem;
}
.collab-desc {
font-size: 0.8rem;
}
}
@media (max-width: 821px) {
.collab-title {
font-size: 1rem;
}
.collab-desc {
font-size: 0.8rem;
}
.swiper-pagination-collab {
display: block;
justify-content: center;
gap: 5px;
margin-top: 15px;
}
/* Bullet default */
.swiper-pagination-collab .swiper-pagination-bullet {
width: 8px;
height: 8px;
background-color: gray !important;
opacity: 0.6;
border-radius: 50%;
transition: all 0.3s ease;
}
/* Bullet aktif */
.swiper-pagination-collab .swiper-pagination-bullet-active {
background-color: grey !important;
opacity: 1;
}
}
@media (max-width: 500px) {
.collab-title {
font-size: 0.6rem;
}
.collab-desc {
font-size: 0.8rem;
}
.swiper-kolaborasi {
height: 200px;
}
.swiper-fade .swiper-slide {
pointer-events: none;
transition-property: opacity;
}
.swiper-fade .swiper-slide-active {
pointer-events: auto;
}
}
/* Very small screens */
@media (max-width: 400px) {
.collab-title {
font-size: 0.6rem;
}
.collab-desc {
font-size: 0.8rem;
}
}
.sertifikat-content {
display: flex;
flex-wrap: wrap; /* Membuat elemen masuk ke baris baru jika ruang habis */
gap: 10px; /* Menambahkan jarak antar elemen */
justify-content: center; /* Mengatur agar elemen berada di tengah */
}
.image-block-sertifikat-container {
display: flex;
flex-wrap: wrap; /* Pastikan gambar dalam container ini selalu diposisikan kesamping */
gap: 10px; /* Jarak antar gambar */
}
.image-block-sertifikat img {
max-width: 100%; /* Menjamin gambar tidak melampaui batas container */
}
.sertifikat-section h4 {
text-align: center;
}
.column-sertifikat {
display: flex;
flex-wrap: wrap; /* Biar bisa pindah baris */
justify-content: center;
gap: 10px; /* Jarak antar gambar */
}
.column-sertifikat img {
width: 200px;
height: 200px;
object-fit: contain;
}
.image-block-sertifikat {
display: flex;
flex-direction: column; /* Gambar di atas, button di bawah */
align-items: center; /* Biar tombol dan gambar di tengah */
}
.image-block-sertifikat img {
width: 200px;
height: 200px;
object-fit: contain;
margin-bottom: 20px;
}
/* Responsive adjustments */
@media (max-width: 1366px) {
.column-sertifikat img {
width: 130px;
height: 130px;
object-fit: contain;
}
}
@media (max-width: 1024px) {
.column-sertifikat img {
width: 120px;
height: 120px;
object-fit: contain;
}
}
@media (max-width: 768px) {
.column-sertifikat img {
width: 80px;
height: 80px;
object-fit: contain;
}
}
/*My Blog*/
.image-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
}
.grid-item {
flex: 1;
min-width: 300px;
margin-bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
.image-container {
width: 100%;
max-width: 280px;
height: 280px;
overflow: hidden;
border-radius: 20px;
margin-bottom: 15px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.grid-item h3 {
margin-bottom: 15px;
font-size: 18px;
text-align: center;
width: 100%;
max-width: 280px;
}
.grid-item p {
text-align: left;
font-size: 14px;
line-height: 1.5;
color: #666;
width: 100%;
max-width: 280px;
}
.button-berita-container {
text-align: center;
margin-top: 20px;
padding: 0 20px; /* tambahkan padding kanan supaya ga mepet */
}
.berita-btn {
padding: 8px 15px;
background-color: rgba(44, 145, 68, 1);
color: white;
border: none;
border-radius: 15px;
cursor: pointer;
text-decoration: none;
}
.berita-btn:hover {
text-decoration: none;
color: white;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.image-grid {
display: flex;
flex-wrap: nowrap;
gap: 10px;
}
.grid-item {
min-width: 100px !important;
}
.image-container {
max-width: 180px !important;
height: 180px !important;
}
.grid-item h3 {
font-size: 15px;
}
.grid-item p {
text-align: left;
font-size: 14px;
width: 80%;
}
}
@media (max-width: 820px){
.grid-item {
min-width: 250px;
}
.image-container {
max-width: 250px;
height: 250px;
}
}
@media (max-width: 769px) {
.blog-mobile-carousel {
width: 100%;
padding: 20px 0;
}
.blog-mobile-carousel .swiper-slide {
display: flex;
justify-content: center;
}
.blog-mobile-carousel .swiper-slide a {
display: flex;
flex-direction: column;
align-items: center;
}
.blog-mobile-carousel .image-container {
width: 280px;
height: 280px;
}
.blog-mobile-carousel h3, .blog-mobile-carousel p {
max-width: 280px;
text-align: center;
}
.berita-btn {
display: none;
}
.blog-mobile-carousel .swiper-slide {
display: flex;
flex-direction: column;
align-items: center;
}
/* Pagination di tengah dan rapi */
.swiper-pagination-blog {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 15px;
}
/* Bullet default */
.swiper-pagination-blog .swiper-pagination-bullet {
width: 8px;
height: 8px;
background-color: gray !important;
opacity: 0.6;
border-radius: 50%;
transition: all 0.3s ease;
}
/* Bullet aktif */
.swiper-pagination-blog .swiper-pagination-bullet-active {
background-color: grey !important;
opacity: 1;
}
}
@media (max-width: 576px) {
.blog-mobile-carousel {
width: 100%;
padding: 20px 0;
}
.blog-mobile-carousel .swiper-slide {
display: flex;
justify-content: center;
}
.blog-mobile-carousel .swiper-slide a {
display: flex;
flex-direction: column;
align-items: center;
}
.blog-mobile-carousel .image-container {
width: 280px;
height: 280px;
}
.blog-mobile-carousel h3, .blog-mobile-carousel p {
max-width: 280px;
text-align: center;
}
.berita-btn {
display: none;
}
.blog-mobile-carousel .swiper-slide {
display: flex;
flex-direction: column;
align-items: center;
}
}
/*Karir*/
.karir-heading {
font-size: 2.5rem;
text-align: center;
margin-bottom: 20px;
}
.karir-section {
position: relative;
overflow: hidden;
padding: 40px 20px;
height: 850px; /* Add a specific height */
width: 100%;
margin: 40px 0; /* Add some margin to separate from other sections */
}
.carousel-container-karir {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* Change to -1 so content appears above the background */
}
.carousel-slide-karir {
position: relative; /* Change from absolute to allow natural sizing */
width: 100%;
height: 100%;
}
.background-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Add this to make text stand out against the background */
.karir-section h2 {
position: relative;
z-index: 2;
color: #fff; /* Adjust text color to ensure visibility against your background */
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Optional: add shadow for better readability */
}
.karir-text {
display: flex;
justify-content: center;
margin-top: 30px;
position: absolute; /* Memastikan tombol di atas gambar */
top: 70%; /* Posisi tengah dari bagian atas */
left: 50%;
transform: translate(-50%, -50%); /* Agar benar-benar di tengah */
z-index: 4; /* Ensure button is above the background */
color: #f7f7f7;
font-size: 1.5rem;
font-weight: bold;
text-align: center;
}
.karir-button-container {
display: flex;
justify-content: center;
margin-top: 30px;
position: absolute; /* Memastikan tombol di atas gambar */
top: 90%; /* Posisi tengah dari bagian atas */
left: 50%;
transform: translate(-50%, -50%); /* Agar benar-benar di tengah */
z-index: 4; /* Ensure button is above the background */
}
.karir-button {
padding: 10px 20px;
font-size: 1rem;
background-color: rgba(44, 145, 68, 1);
color: white;
border: none;
border-radius: 15px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.karir-button:hover {
background-color: none;
}
@media (max-width: 1024px) {
.karir-section {
height: 600px; /* Add a specific height */
width: 100%;
}
.karir-text {
font-size: 1rem;
}
.karir-button-container {
top: 85% !important; /* Posisi tengah dari bagian atas */
}
.karir-button {
padding: 8px 16px;
font-size: 0.9rem;
}
.karir-heading {
font-size: 2.5rem;
text-align: center;
margin-bottom: 20px;
}
}
@media (max-width: 885px) {
.karir-section {
height: 470px !important; /* Add a specific height */
width: 100%;
}
.karir-text {
top: 65% !important;
font-size: 1rem !important;
}
.karir-button-container {
top: 86% !important; /* Posisi tengah dari bagian atas */
}
.karir-button {
padding: 8px 16px;
font-size: 0.7rem !important;
}
}
@media (max-width: 835px) {
.karir-section {
height: 450px !important; /* Add a specific height */
width: 100%;
}
.karir-text {
top: 65% !important;
font-size: 1rem !important;
}
.karir-button-container {
top: 85% !important; /* Posisi tengah dari bagian atas */
}
.karir-button {
padding: 8px 16px;
font-size: 0.7rem !important;
}
}
@media (max-width: 625px) {
.karir-section {
height: 500px !important; /* Add a specific height */
width: 100%;
}
.karir-text {
top: 80% !important;
font-size: 0.5rem;
}
.karir-button-container {
top: 85% !important; /* Posisi tengah dari bagian atas */
}
.karir-button {
padding: 8px 16px;
font-size: 0.5rem;
}
.karir-heading {
font-size: 2rem;
text-align: center;
margin-bottom: 20px;
}
}
@media (max-width: 435px) {
.karir-section {
height: 440px !important; /* Add a specific height */
width: 100%;
}
.karir-text {
top: 80% !important;
font-size: 0.5rem;
}
.karir-button-container {
top: 85% !important; /* Posisi tengah dari bagian atas */
}
.karir-button {
padding: 8px 16px;
font-size: 0.5rem;
}
.karir-heading {
font-size: 2rem;
text-align: center;
margin-bottom: 20px;
}
}
@media (max-width: 395px) {
.karir-section {
height: 400px !important; /* Add a specific height */
width: 100%;
}
.karir-text {
top: 80% !important;
font-size: 0.5rem !important;
}
.karir-button-container {
top: 85% !important; /* Posisi tengah dari bagian atas */
}
.karir-button {
padding: 8px 16px !important;
font-size: 0.5rem !important;
}
.karir-heading {
font-size: 2rem;
text-align: center;
margin-bottom: 20px;
}
}
@media (max-width: 320px) {
.karir-section {
height: 340px !important; /* Add a specific height */
width: 100%;
}
.karir-text {
top: 80% !important;
font-size: 7px;
}
.karir-button-container {
top: 85% !important; /* Posisi tengah dari bagian atas */
}
.karir-button {
padding: 8px 16px;
font-size: 7px;
}
.karir-heading {
font-size: 2rem;
text-align: center;
margin-bottom: 20px;
}
}
/*warning*/
#warning{
padding-top: 1px;
}
.warning-section {
text-align: center;
padding: 40px 20px;
}
.warning-image-wrapper {
width: 100%;
overflow: hidden;
height: 100%;
}
.warning-background-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: 10px; /* Opsional */
}
.warning-background-mobile {
display: none;
}
.warning-image-mobile {
display: none; /* default: sembunyi (desktop) */
}
/* Section Warning Rev */
#karir,
#warning {
margin: 0;
padding: 0;
}
.karir-section,
.warning-section {
margin: 0;
padding: 0;
}
.carousel-container-karir,
.carousel-container-warning {
margin: 0;
padding: 0;
}
.warning-section {
position: relative;
overflow: hidden;
padding: 40px 20px;
height: 850px; /* Add a specific height */
width: 100%;
margin: 1px 0; /* Add some margin to separate from other sections */
}
.carousel-container-warning {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* Change to -1 so content appears above the background */
}
.carousel-slide-warning {
position: relative; /* Change from absolute to allow natural sizing */
width: 100%;
height: 100%;
}
.background-image-warning {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
@media (min-width: 1620px) {
.warning-section {
height: 1000px; /* Add a specific height */
width: 100%;
}
}
@media (max-width: 1366px){
.warning-section{
height: 768px; /* Add a specific height */
width: 100%;
}
}
@media (max-width: 1024px) {
.warning-section {
height: 600px; /* Add a specific height */
width: 100%;
}
}
@media (max-width: 920px) {
.warning-section {
height: 550px; /* Add a specific height */
width: 100%;
}
}
@media (max-width: 820px) {
.warning-section {
height: 500px; /* Add a specific height */
width: 100%;
}
}
@media (max-width:768px){
.warning-section {
height: 780px; /* Add a specific height */
width: 100%;
}
.warning-image-wrapper {
display: none;
}
.warning-image-mobile {
display: block;
}
}
@media (max-width:435px){
.warning-section {
height: 420px; /* Add a specific height */
width: 100%;
}
.warning-image-wrapper {
display: none;
}
.warning-image-mobile {
display: block;
}
}
@media (max-width:391px){
.warning-section {
height: 392px; /* Add a specific height */
width: 100%;
}
.warning-image-wrapper {
display: none;
}
.warning-image-mobile {
display: block;
}
}
@media (max-width:360px){
.warning-section {
height: 350px; /* Add a specific height */
width: 100%;
}
.warning-image-wrapper {
display: none;
}
.warning-image-mobile {
display: block;
}
}
/* Footer */
footer {
background-color: white;
color: #333;
padding: 40px 5% 20px;
font-family: Arial, sans-serif;
}
.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
row-gap: 0px;
column-gap: 40vw;
}
.email-footer {
color: inherit; /* Mengambil warna dari elemen induk */
text-decoration: none; /* Menghapus garis bawah */
}
.footer-left,
.footer-right {
flex: 1 1 300px;
min-width: 300px;
}
.footer-logo img {
max-width: 150px;
height: auto;
margin-bottom: 15px;
margin-left: 1px;
}
.footer-left h2,
.footer-right h2 {
color: #333;
margin-bottom: 10px;
}
.footer-left p {
margin: 0 0 20px;
line-height: 1.6;
}
/* Marketplace dan social icon */
.marketplace-grid {
display: flex;
flex-direction: column;
padding-top: 80px;
gap: 15px;
}
.social-links {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.social-icon {
width: 40px;
height: 40px;
background-color: rgba(141, 138, 138, 0.1);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.3s ease;
}
.social-icon img {
width: 20px;
height: 20px;
}
.social-icon:hover {
background-color: #0088a9;
}
@media (max-width: 1195px){
.footer-content {
column-gap: 30vw;
}
}
@media (max-width: 912px){
.footer-content {
column-gap: 15vw !important;
}
}
/* Responsif Tambahan */
@media (max-width: 768px) {
.footer-content {
flex-direction: column;
align-items: flex-start;
}
.marketplace-grid {
padding-top: 0px;
}
.footer-logo img {
max-width: 80px;
height: auto;
}
.footer-left{
flex: 1 1 80px;
min-width: 300px;
}
.footer-left p {
margin: 0 0 10px;
font-size: 0.7rem;
}
.footer-left h2 {
font-size: 1.2rem;
}
.social-links {
justify-content: flex-start;
gap: 5px;
}
.footer-right {
margin-top: 10px;
width: 100px;
flex: 1 1 80px;
}
.footer-right h2 {
font-size: 1.2rem;
margin-bottom: 0px;
}
.social-icon {
width: 25px;
height: 25px;
}
.social-icon img {
width: 10px;
height: 10px;
}
}
/* Responsive styles */
@media screen and (max-width: 768px) {
.menu-toggle {
display: flex;
}
.nav-links {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
background-color: rgba(0, 0, 0, 0.25);
text-align: center;
padding: 20px 0;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
display: none;
}
.nav-links.active {
display: flex;
}
.nav-links li {
margin: 10px 0;
}
.search-form {
width: 90%;
}
.hero h1 {
font-size: 2rem;
}
section {
padding: 60px 5%;
}
section h2 {
font-size: 2rem;
}
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1rem;
}
.carousel-button {
width: 30px;
height: 30px;
font-size: 1.2rem;
}
}
@media (max-width: 480px) {
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 0.9rem;
}
/* .cta-button {
padding: 8px 16px;
font-size: 0.9rem;
text-decoration: none;
} */
.per-button {
padding: 8px 16px;
font-size: 0.9rem;
}
.produk-desc {
padding: 8px 16px;
font-size: 0.9rem;
text-decoration: none;
}
.carousel-button {
width: 25px;
height: 25px;
font-size: 1rem;
}
.search-form input {
padding: 0.8rem 3rem 0.8rem 0.8rem;
font-size: 1rem;
}
}
/* About Page */
.hero-about {
height: 813px;
width: 100%;
display: flex;
align-items: center;
justify-content: left;
text-align: left;
color: white;
padding: 0 5%;
position: relative;
overflow: hidden;
}
.about-page-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('src/about/about_page.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media (max-width:1366px){
.hero-about{
height: 700px;
width: 100%;
}
}
@media (max-width: 820px) {
.hero-about {
height: 70vh; /* Reduce height on smaller devices */
}
}
@media screen and (max-width: 768px) {
.hero-about {
height: 50vh; /* Reduce height on smaller devices */
}
}
@media (max-width: 480px) {
.hero-about {
height: 35vh; /* Reduce height on smaller devices */
}
}
/* Tongtji About */
.tongtji-about-text{
text-align: center;
font-size: 1.2rem;
line-height: 1.8rem;
padding: 0 8%;
}
@media (max-width: 820px) {
.tongtji-about-text{
font-size: 1.1rem;
padding: 0 7%;
}
}
@media screen and (max-width: 768px) {
.tongtji-about-text{
font-size: 1rem;
padding: 0 5%;
}
}
@media screen and (max-width: 480px) {
.tongtji-about-text{
font-size: 0.7rem;
line-height: 1rem;
}
}
@media (max-width: 350px) {
.tongtji-about-text{
font-size: 0.7rem;
padding: 0 3%;
}
}
/* logo di page About */
.tongtji-group-section {
padding: 20px 20px;
max-width: 1400px; /* Increased max-width to accommodate all cards */
margin: 0 auto;
}
.logo-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 60px; /* Reduced gap to fit all items in a row */
}
.logo-card {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
width: 200px; /* Fixed width for all cards */
margin-bottom: 40px;
position: relative;
}
.image-block-logo {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.image-block-logo img {
width: 120px;
height: 120px;
object-fit: contain;
margin-bottom: 15px;
}
.logo-desc {
font-family: 'Poppins', sans-serif;
font-weight: 500;
text-align: center;
margin-bottom: 15px;
}
.description-box {
padding: 15px;
margin-top: 10px;
width: 95%;
/* Hapus aturan height agar kotak mengikuti konten */
background-color: rgba(34, 169, 64, 0.05);
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
border-radius: 10px;
}
.description-box h4 {
font-family: 'Poppins', sans-serif;
font-size: 1rem;
font-weight: 600;
margin-bottom: 10px;
color: black;
}
.description-box p {
font-family: 'Poppins', sans-serif;
font-size: 0.8rem;
line-height: 1.3;
margin-bottom: 10px;
color: black;
}
.carousel-indicators [data-bs-target] {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: grey;
opacity: 0.6;
}
.carousel-indicators .active {
background-color: gray; /* warna aktif */
opacity: 1;
}
/* Media queries for responsive behavior */
@media (max-width: 1366px) {
/* For large screens - all cards in one row */
.logo-cards {
flex-wrap: wrap;
justify-content: space-between;
}
.logo-card {
width: 18%; /* Roughly 1/5 of the container width with some spacing */
flex: 0 0 18%;
gap: 40px;
}
}
@media (max-width: 10240px) {
.image-block-logo img {
width: 70px;
height: 70px;
}
.logo-desc {
display: none;
}
/* For large screens - all cards in one row */
.logo-cards {
flex-wrap: nowrap;
justify-content:center;
gap: 15px;
}
.logo-card {
width: 40%; /* Roughly 1/5 of the container width with some spacing */
flex: 0 0 18%;
gap: 15px;
}
.description-box h4 {
font-size: 14px;
}
.description-box p {
font-size: 13px;
}
}
@media (max-width: 768px) {
.image-block-logo img {
width: 70px;
height: 70px;
}
.logo-desc {
display: none;
}
/* For large screens - all cards in one row */
.logo-cards {
flex-wrap: wrap;
justify-content: space-between;
gap: 5px;
}
.logo-card {
width: 60%; /* Roughly 1/5 of the container width with some spacing */
flex: 0 0 1%;
gap: 5px;
}
.description-box h4 {
font-size: 0.8rem;
}
.description-box p {
font-size: 0.7rem;
}
}
@media (max-width: 480px) {
/* For mobile - one card per row */
.logo-card {
width: 45%;
flex: 0 0 50%;
}
.image-block-logo img {
width: 80px;
height: 60px;
}
}
/* Visi & Misi */
.visi-misi-section {
text-align: center;
padding: 10px 0;
margin: 0;
}
.visi-image-wrapper {
position: relative; /* agar .visi-content bisa pakai absolute */
width: 100%;
height: 565px;
overflow: hidden;
}
.visi-background-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Teks di atas gambar */
.visi-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
max-width: 100%;
padding: 0px;
border-radius: 10px;
align-items: center;
}
/* Responsive text */
.visi-content h2 {
font-size: 3rem;
margin-bottom: 10px;
}
.visi-content p, .visi-content ul {
font-size: 1.3rem;
}
.visi-content ul {
list-style-type: disc;
margin: 10px auto 0;
padding-left: 20px;
text-align: center;
}
@media (max-width: 1366px) {
.visi-image-wrapper{
height: 400px;
}
.visi-content h2 {
font-size: 1.8rem;
}
.visi-content p, .visi-content ul {
font-size: 0.9rem;
}
}
@media (max-width: 768px) {
.visi-content{
width: 50%;
}
.visi-content h2 {
font-size: 1.5rem;
}
.visi-content p, .visi-content ul {
font-size: 0.9rem;
}
.visi-image-wrapper {
height: 80vh; /* Adjust height for smaller screens */
}
}
@media (max-width: 480px) {
.visi-content{
width: 80%;
}
.visi-content h2 {
font-size: 1.2rem;
}
.visi-content p, .visi-content ul {
font-size: 0.8rem;
}
.visi-image-wrapper {
height: 60vh; /* Adjust height for smaller screens */
}
}
/* Company Value */
.company-value-section {
text-align: center;
padding: 40px 0;
margin: 0;
}
.company-value-wrapper {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
padding: 60px 20px;
}
.company-value-background-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.value-cards {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 142px;
margin-top: 30px;
}
.value-card {
width: 220px;
display: flex;
flex-direction: column;
align-items: center;
}
.image-block-value {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
position: relative;
}
/* This will create the colored circles */
.image-block-value::before {
content: attr(data-letter);
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
border-radius: 50%;
font-size: 70px;
font-weight: bold;
color: rgba(0, 0, 0, 0.7);
position: absolute;
top: -10px;
z-index: 1;
}
/* Position your original images in front of the colored circles */
.image-block-value img {
width: 180px;
height: 180px;
object-fit: contain;
margin-bottom: 15px;
position: relative;
z-index: 2;
}
.value-desc {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 1.7rem;
margin: 10px 0;
position: relative;
z-index: 2;
}
.value-description {
font-family: 'Instrument Sans', sans-serif;
font-size: 1.1rem;
line-height: 1.5;
color: black;
text-align: center;
max-width: 250px;
position: relative;
z-index: 2;
}
@media screen and (min-width: 820px) and (max-width: 1366px) {
.value-cards {
position: relative;
z-index: 2;
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 15px;
margin-top: 30px;
}
.value-card {
width: 220px;
display: flex;
flex-direction: column;
align-items: center;
}
.image-block-value {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
position: relative;
}
/* Position your original images in front of the colored circles */
.image-block-value img {
width: 100px;
height: 100px;
object-fit: contain;
margin-bottom: 15px;
position: relative;
z-index: 2;
}
.value-desc {
font-size: 1.2rem;
}
.value-description {
font-size: 0.9rem;
}
}
/* Responsive design */
@media screen and (max-width: 768px) {
.value-cards {
flex-direction: row; /* Change to row layout for mobile */
justify-content: space-between; /* Space items evenly */
gap: 20px; /* Adjust gap for mobile */
}
.image-block-value img {
width: 100px;
height: 100px;
}
.value-desc {
font-size: 1.3rem;
}
.value-description {
font-size: 0.8rem;
}
.value-card {
width: calc(50% - 10px); /* Two cards per row with some margin */
}
}
/* Title styling */
.company-value-section h2 {
position: relative;
z-index: 2;
margin-bottom: 20px;
font-size: 28px;
}
.bold {
font-weight: 700;
}
.italic {
font-style: italic;
}
/* Product Page */
.hero-product {
height: 750px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
position: relative;
overflow: hidden;
}
.product-page-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.product-page-container::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity - adjust as needed */
z-index: 2; /* Above the background image */
}
.product-page-card-section {
z-index: 3; /* Increased to be above the overlay */
position: relative; /* Make sure it's above the overlay */
display: flex;
gap: 250px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}
.product-page-card {
z-index: 3; /* Increased to be above the overlay */
position: relative; /* Make sure it's above the overlay */
display: flex;
gap: 50px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}
.product-page-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.product-page-card.active-category {
border: 2px solid rgba(44, 145, 68, 1);
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
/* Initially hide the product section - optional depending on your design */
#tongtji-product-frame {
display: none;
}
.product-page-card-link {
text-decoration: none;
color: inherit; /* supaya teks tidak berubah warna */
}
/* Masing-masing item */
.product-item {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
.product-page-link {
text-decoration: none;
}
.product-item p {
font-size: 30px;
font-weight: bold;
margin-bottom: 10px;
color: white;
}
.product-item img {
max-width: 675px;
height: 418px;
width: 418px;
}
@media (max-width: 1195px) {
.hero-product {
height: 70vh;
}
.product-page-card-section {
flex-direction: row; /* tampilkan berdampingan */
flex-wrap: wrap; /* biar kalau sempit dia tetap responsif */
gap: 60px; /* beri jarak antar item */
}
.product-item p {
font-size: 35px;
}
.product-item img {
max-width: 450px;
height: 300px;
width: 300px;
}
}
/* Responsive tweaks */
@media (max-width: 820px) {
.hero-product {
height: 70vh;
}
.product-page-card-section {
flex-direction: row; /* tampilkan berdampingan */
flex-wrap: wrap; /* biar kalau sempit dia tetap responsif */
gap: 40px; /* beri jarak antar item */
}
.product-item p {
font-size: 30px;
}
.product-item img {
max-width: 450px;
height: 230px;
width: 230px;
}
}
/* Responsive tweaks */
@media (max-width: 768px) {
.hero-product {
height: 70vh;
}
.product-item {
flex-direction: column-reverse;
}
.product-item p {
font-size: 25px;
}
.product-item img {
max-width: 450px;
height: 200px;
width: 200px;
}
.product-page-card-section {
flex-direction: column; /* Ubah menjadi column agar item menjadi atas-bawah */
gap: 20px; /* Atur jarak antar item */
}
}
@media (max-width: 480px) {
.hero-product {
height: 50vh;
}
.product-page-card-section {
flex-direction: column; /* tampilkan berdampingan */
gap: 0px; /* beri jarak antar item */
}
.product-page-card {
flex-direction: row;
gap: 0px;
}
.product-item {
width: 100%; /* Biar dua item muat dalam satu baris */
}
.product-item p {
font-size: 14px;
}
.product-item img {
height: auto;
width: 150px;
}
}
@media (max-width: 395px) {
.hero-product {
height: 50vh;
}
.product-page-card-section {
flex-direction: column; /* tampilkan berdampingan */
gap: 0px; /* beri jarak antar item */
}
.product-page-card {
flex-direction: row;
gap: 0px;
}
.product-item {
width: 100%; /* Biar dua item muat dalam satu baris */
}
.product-item p {
font-size: 14px;
}
.product-item img {
height: 100px;
width: 100px;
}
}
/* Produk Page */
.products-page-section {
background-color: transparent;
padding: 60px 20px; /* tambahan padding supaya konten tidak terlalu mepet */
}
.product-page-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 50px;
}
.image-block-produk-page {
display: flex;
flex-direction: column; /* Gambar di atas, button di bawah */
align-items: center; /* Biar tombol dan gambar di tengah */
}
.image-block-produk-page img {
width: 250px;
height: 250px;
object-fit: contain;
margin-bottom: 20px;
cursor: pointer;
}
.image-block-produk-page p {
color: black;
margin-bottom: 20px;
}
.produk-page-desc{
font-family: 'Poppins', sans-serif;
}
@media (max-width: 1024px) {
.image-block-produk-page img {
display: block;
}
.image-block-produk-page p {
display: block;
}
.image-block-produk-page img {
width: 180px;
height: 180px;
}
.product-page-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.image-block-produk-page p {
font-size: 1.2rem;
}
}
@media (max-width: 820px) {
.image-block-produk-page img {
display: block;
}
.image-block-produk-page p {
display: block;
}
.image-block-produk-page img {
width: 130px;
height: 130px;
}
.product-page-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.image-block-produk-page p {
font-size: 1.2rem;
}
}
@media (max-width: 768px) {
.products-page-section {
background-color: transparent;
}
.image-block-produk-page img {
display: block;
}
.image-block-produk-page p {
display: block;
}
.image-block-produk-page img {
width: 100px;
height: 100px;
}
.product-page-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.image-block-produk-page p {
font-size: 1rem;
}
}
@media (max-width: 760px) {
.image-block-produk-page img {
display: none;
}
.image-block-produk-page p {
display: none;
}
}
/* Product Frame Section */
/* .product-frame-container {
display: flex;
max-width: 100%;
background-color: white;
border-radius: 8px;
overflow: hidden;
}
.image-frame-section {
width: 40%;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.product-image {
width: 100%;
height: 500px;
object-fit: cover;
}
.product-frame-info {
width: 100%;
padding: 100px;
display: flex;
flex-direction: column;
justify-content: center;
}
.product-frame-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #333;
}
.product-frame-description {
font-size: 14px;
line-height: 1.6;
color: #666;
}
.swiper-container {
overflow: hidden;
position: relative;
width: 100%;
}
.swiper-wrapper {
display: flex;
width: 100%;
height: 100%;
box-sizing: content-box;
}
.swiper-slide {
width: auto;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
transition-property: transform;
}
@media (max-width: 1024px) {
.product-frame-container {
flex-direction: row;
align-items: flex-start;
justify-content: center;
}
.product-image{
width: auto;
height: 300px;
}
.product-frame-info {
width: auto;
max-width: 50%;
}
}
@media (max-width: 768px) {
.product-frame-container {
flex-direction: column;
flex-wrap: wrap;
align-items: center;
width: 100%;
}
.product-frame-info {
padding: 0px !important;
width: 100% !important;
text-align: center;
}
.product-frame-description {
font-size: 10px !important;
line-height: 1 !important;
}
.product-image {
width: 100%;
height: auto;
max-height: 300px;
object-fit: contain;
}
.image-frame-section {
padding: 0px;
width: 100%;
}
}
@media (max-width: 435px) {
.product-frame-container {
flex-direction: column;
flex-wrap: wrap;
}
.product-frame-info {
padding:0px !important;
width: 100%;
text-align: left !important;
}
.product-image {
width: 100%;
height: auto;
max-height: 300px;
object-fit: contain;
}
.image-frame-section {
padding: 10px;
width: 100%;
}
} */
/* Product Frame Bootstrap */
/* Custom styles to match your original design */
.tongtji-product-frame-section {
padding: 2rem 0;
}
#product-section-title {
text-align: center;
margin-bottom: 2rem;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.product-frame-container {
background-color: white;
border-radius: 8px;
overflow: hidden;
}
.product-image {
width: 100%;
height: 500px;
object-fit: cover;
}
.product-frame-info {
padding: 3rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.product-frame-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #333;
}
.product-frame-description {
font-size: 17px;
line-height: 1.6;
color: black;
font-family: "Instrument Sans", sans-serif;
}
.swiper-pagination-foto {
display: flex;
justify-content: center;
margin-top: 10px;
}
.swiper-pagination-foto .swiper-pagination-bullet {
background-color: grey;
opacity: 0.5;
}
.swiper-pagination-foto .swiper-pagination-bullet-active {
background-color: grey;
opacity: 1;
}
/* .swiper-pagination-product {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.swiper-pagination-product .swiper-pagination-bullet {
background-color: grey;
opacity: 0.5;
}
.swiper-pagination-product .swiper-pagination-bullet-active {
background-color: grey;
opacity: 1;
} */
.swiper-button-prev-product,
.swiper-button-next-product,
.swiper-button-next-culinary,
.swiper-button-prev-culinary{
color: #2C9144 !important; /* Warna tombol */
width: 40px;
height: 40px;
border-radius: 50%;
z-index: 10;
}
/* Media queries are handled by Bootstrap's responsive classes */
@media (max-width: 768px) {
.product-frame-info {
padding: 1.5rem !important;
text-align: center;
}
.product-frame-description {
font-size: 10px !important;
line-height: 1 !important;
}
.product-image {
max-height: 300px;
object-fit: contain;
}
}
@media (max-width: 435px) {
.product-frame-info {
text-align: left !important;
}
}
/* Culinary Frame Section */
/* Custom styles to maintain original layout with Bootstrap */
.culinary-frame-container {
background-color: white;
border-radius: 8px;
overflow: hidden;
}
/* Main image container to maintain proportional height */
.culinary-main-image-container {
height: 100%;
display: flex;
align-items: center;
}
.culinary-main-image {
width: 100%;
max-width: 510px;
height: auto;
aspect-ratio: 1/1;
object-fit: cover;
border: 1px solid #eee;
cursor: pointer;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Container for thumbnails to match main image height */
.thumbnail-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Make thumbnails responsive to main image */
.thumbnail-culinary {
width: 120px;
height: 120px; /* Distribute height evenly accounting for gaps */
object-fit: cover;
cursor: pointer;
border: 1px solid #ddd;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.thumbnail-culinary:hover {
border-color: #888;
transform: scale(1.05);
opacity: 0.9;
}
.culinary-frame-title {
font-size: 24px;
font-weight: bold;
color: #333;
}
.culinary-frame-description {
font-size: 17px;
line-height: 1.6;
color: black;
font-family: "Instrument Sans", sans-serif;
}
.image-transition {
animation: fadeSwap 0.3s ease;
}
@keyframes fadeSwap {
0% { opacity: 0.7; }
100% { opacity: 1; }
}
/* Swiper navigation customization */
.swiper-button-prev, .swiper-button-next {
color: #333;
}
/* Responsive adjustments */
@media (max-width: 1366px) {
.culinary-main-image {
max-width: 400px;
aspect-ratio: 1/1;
}
.thumbnail-culinary {
width: 100px;
height: 100px;
}
}
@media (max-width: 1195px) {
.culinary-main-image {
max-width: 320px;
aspect-ratio: 1/1;
}
.thumbnail-culinary {
width: 68px;
height: 68px;
}
}
@media (max-width: 768px) {
.culinary-main-image {
max-width: 280px;
}
.thumbnail-culinary {
width: 63px;
height: 63px;
}
}
@media (max-width: 576px) {
.culinary-main-image {
max-width: 220px;
aspect-ratio: 1/1;
}
.thumbnail-culinary {
width: 50px;
height: calc((220px - 1rem) / 3);
}
}
@media (max-width: 435px) {
.culinary-frame-container .row {
flex-direction: column !important; /* Urutkan kembali secara vertikal */
align-items: center; /* Pusatkan semua kolom */
}
.culinary-main-image-container,
.thumbnail-container {
justify-content: center;
align-items: center;
text-align: center;
}
.culinary-frame-container .col-lg-6,
.culinary-frame-container .col-md-6 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem !important; /* Atur padding agar tidak terlalu besar */
}
.culinary-frame-info {
padding: 10px;
}
.thumbnail-culinary {
width: 55px;
height: 55px;
}
}
/* News Page */
.hero-news {
height: 810px;
width: 100%;
display: flex;
align-items: center;
justify-content: left;
text-align: left;
color: white;
padding: 0 5%;
position: relative;
overflow: hidden;
}
.news-page-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('src/about/about_page.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media (max-width:1366px){
.hero-news{
height: 700px;
width: 100%;
}
}
@media (max-width: 820px) {
.hero-news {
height: 70vh; /* Reduce height on smaller devices */
}
}
@media screen and (max-width: 768px) {
.hero-news {
height: 50vh; /* Reduce height on smaller devices */
}
}
@media (max-width: 480px) {
.hero-news {
height: 35vh; /* Reduce height on smaller devices */
}
}
/* Tongtji News */
.tongtji-news-title {
font-size: 2rem;
text-align: left;
margin: 0 8% 20px;
font-weight: bold;
letter-spacing: 0.5px;
}
.tongtji-news-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0 8%;
gap: 30px;
flex-wrap: wrap;
}
.tongtji-news-text,
.tongtji-news-text * {
flex: 1;
font-size: 1.2rem;
line-height: 1.8rem;
text-align: left;
font-family: "Instrument Sans", sans-serif !important;
}
.tongtji-news-image-wrapper {
width: 284px;
display: flex;
flex-direction: column;
align-items: center;
}
.tongtji-news-image {
width: 100%;
max-width: 350px;
height: auto;
border-radius: 8px;
cursor: pointer; /* Make it clickable */
}
.tongtji-news-tags {
margin-top: 10px;
text-align: left;
font-style: italic;
}
.tongtji-news-tags p {
margin: 3px 0;
color: #444;
font-weight: 500;
}
/* Modal Swiper Styling */
.tongtji-news-swiper-modal {
width: 60vw;
max-width: 600px;
height: auto;
background: transparent;
border-radius: 10px;
padding: 20px;
position: relative;
}
.tongtji-news-swiper-modal .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.tongtji-news-swiper-modal .swiper-slide img {
width: 100%;
max-height: 50vh;
object-fit: contain;
border-radius: 8px;
}
.swiper-button-next, .swiper-button-prev {
color: #333;
}
.swiper-pagination-bullet-active {
background: #333;
}
.image-container-blog-hover {
position: relative;
width: fit-content;
overflow: hidden;
text-align: center;
}
.news-image {
cursor: pointer;
transition: transform 0.3s ease;
display: block;
}
.news-image:hover {
transform: scale(1.03);
}
/* Background Gradient Layer */
.hover-bg-blog {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%; /* atau pakai px sesuai kebutuhan */
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none; /* biar nggak bentrok hover */
border-radius: 15px;
text-align: center;
}
/* Text Layer */
.hover-text-blog {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 2;
pointer-events: none;
text-align: center;
}
/* Hover trigger */
.image-container-blog-hover:hover .hover-bg-blog,
.image-container-blog-hover:hover .hover-text-blog {
opacity: 1;
}
.image-grid-detail{
display: none;
}
.image-grid-detail-desktop {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
}
.grid-item-detail-desktop {
flex: 1;
min-width: 300px;
margin-bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
.image-container-detail-desktop {
width: 100%;
max-width: 280px;
height: 280px;
overflow: hidden;
border-radius: 20px;
margin-bottom: 15px;
}
.image-container-detail-desktop img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.grid-item-detail-desktop h3 {
margin-bottom: 15px;
font-size: 18px;
text-align: center;
width: 100%;
max-width: 280px;
}
.grid-item-detail-desktop p {
text-align: left;
font-size: 14px;
line-height: 1.5;
color: #666;
width: 100%;
max-width: 280px;
}
@media (max-width: 1367px) {
.tongtji-news-content {
padding: 0 6%;
}
.image-grid-detail-desktop {
display: none;
}
.image-grid-detail {
display: flex;
flex-wrap: wrap; /* Izinkan wrap */
justify-content: space-between; /* Atur jarak antar item */
gap: 10px;
}
.grid-item-detail {
flex: 1 1 calc(33.33% - 10px); /* 3 kolom dalam 1 baris dengan gap */
max-width: calc(33.33% - 10px);
margin-bottom: 15px;
}
.image-container-detail {
width: 100%;
height: auto;
aspect-ratio: 1 / 1; /* Biar tetap kotak */
overflow: hidden;
border-radius: 12px;
margin-bottom: 10px;
display: flex; /* Tambahkan ini */
justify-content: center; /* Pusat horizontal */
align-items: center;
}
.image-container-detail img {
width: 80%;
height: 80%;
object-fit: cover;
}
.grid-item-detail h3 {
font-size: 18px;
text-align: center;
margin-bottom: 8px;
}
.grid-item-detail p {
font-size: 12px;
text-align: left;
}
.tongtji-news-swiper-modal {
width: 400px;
max-width: 400px;
}
.tongtji-news-swiper-modal .swiper-slide img {
width:70%;
max-height: 400px;
}
.tongtji-news-image-wrapper {
width: 200px;
}
.news-image {
max-width: 80%;
max-height: 80%;
}
.hover-text-blog {
width: 80%;
font-size: 14px;
}
}
@media (max-width: 1285px) {
.tongtji-news-content {
padding: 0 6%;
}
.image-grid-detail-desktop {
display: none;
}
.image-grid-detail {
display: flex;
flex-wrap: wrap; /* Izinkan wrap */
justify-content: space-between; /* Atur jarak antar item */
gap: 10px;
}
.grid-item-detail {
flex: 1 1 calc(33.33% - 10px); /* 3 kolom dalam 1 baris dengan gap */
max-width: calc(33.33% - 10px);
margin-bottom: 15px;
}
.image-container-detail {
width: 100%;
height: auto;
aspect-ratio: 1 / 1; /* Biar tetap kotak */
overflow: hidden;
border-radius: 12px;
margin-bottom: 10px;
display: flex; /* Tambahkan ini */
justify-content: center; /* Pusat horizontal */
align-items: center;
}
.image-container-detail img {
width: 80%;
height: 80%;
object-fit: cover;
}
.grid-item-detail h3 {
font-size: 18px;
text-align: center;
margin-bottom: 8px;
}
.grid-item-detail p {
font-size: 12px;
text-align: left;
}
.tongtji-news-swiper-modal {
width: 400px;
max-width: 400px;
}
.tongtji-news-swiper-modal .swiper-slide img {
width:70%;
max-height: 400px;
}
.tongtji-news-image-wrapper {
width: 200px;
}
.news-image {
max-width: 80%;
max-height: 80%;
}
.hover-text-blog {
width: 80%;
font-size: 14px;
}
}
/* Responsive Layouts */
@media (max-width: 1024px) {
.tongtji-news-content {
padding: 0 6%;
}
.image-grid-detail-desktop {
display: none;
}
.image-grid-detail {
display: flex;
flex-wrap: wrap; /* Izinkan wrap */
justify-content: space-between; /* Atur jarak antar item */
gap: 10px;
}
.grid-item-detail {
flex: 1 1 calc(33.33% - 10px); /* 3 kolom dalam 1 baris dengan gap */
max-width: calc(33.33% - 10px);
margin-bottom: 15px;
}
.image-container-detail {
width: 100%;
height: auto;
aspect-ratio: 1 / 1; /* Biar tetap kotak */
overflow: hidden;
border-radius: 12px;
margin-bottom: 10px;
display: flex; /* Tambahkan ini */
justify-content: center; /* Pusat horizontal */
align-items: center;
}
.image-container-detail img {
width: 80%;
height: 80%;
object-fit: cover;
}
.grid-item-detail h3 {
font-size: 18px;
text-align: center;
margin-bottom: 8px;
}
.grid-item-detail p {
font-size: 12px;
text-align: left;
}
.tongtji-news-swiper-modal {
width: 400px;
max-width: 400px;
}
.tongtji-news-swiper-modal .swiper-slide img {
width:70%;
max-height: 400px;
}
.tongtji-news-image-wrapper {
width: 200px;
}
.news-image {
max-width: 80%;
max-height: 80%;
}
.hover-text-blog {
width: 80%;
font-size: 14px;
}
}
@media (max-width: 768px) {
.tongtji-news-swiper {
display: block !important; /* Sembunyikan swiper pada tampilan mobile */
}
.tongtji-news-image-wrapper {
width: 140px !important;
}
.tongtji-news-swiper {
width: 100%;
max-width: 140px;
border-radius: 8px;
overflow: hidden;
}
.tongtji-news-swiper .swiper-slide img {
width: 100%;
height: auto;
border-radius: 8px;
}
.tongtji-news-text {
font-size: 1rem;
}
.tongtji-news-image-wrapper {
width: 100%;
max-width: 400px;
align-items: flex-start;
}
.tongtji-news-tags {
text-align: center;
}
.image-grid-detail-desktop {
display: none;
}
.image-grid-detail {
display: flex;
flex-wrap: wrap; /* Izinkan wrap */
justify-content: space-between; /* Atur jarak antar item */
gap: 10px;
}
.grid-item-detail {
flex: 1 1 calc(33.33% - 10px); /* 3 kolom dalam 1 baris dengan gap */
max-width: calc(33.33% - 10px);
margin-bottom: 15px;
}
.image-container-detail {
width: 100%;
height: auto;
aspect-ratio: 1 / 1; /* Biar tetap kotak */
overflow: hidden;
border-radius: 12px;
margin-bottom: 10px;
}
.image-container-detail img {
width: 80%;
height: 80%;
object-fit: cover;
}
.grid-item-detail h3 {
font-size: 12px;
text-align: center;
margin-bottom: 8px;
}
.grid-item-detail p {
font-size: 10px;
text-align: left;
}
.tongtji-news-swiper-modal {
width: 400px;
max-width: 400px;
}
.tongtji-news-swiper-modal .swiper-slide img {
width:60%;
max-height: 400px;
}
.tongtji-news-image-wrapper {
width: 250px;
}
.news-image {
max-width: 80%;
max-height: 80%;
}
.hover-text-blog {
width: 80%;
font-size: 10px;
}
}
@media (max-width: 480px) {
.tongtji-news-image-wrapper {
width: 80px !important;
}
.tongtji-news-swiper {
width: 100%;
max-width: 80px;
border-radius: 8px;
overflow: hidden;
}
.tongtji-news-swiper .swiper-slide img {
width: 100%;
height: auto;
border-radius: 8px;
}
.tongtji-news-text {
font-size: 0.7rem;
padding: 0;
}
.tongtji-news-swiper {
display: block !important; /* Sembunyikan swiper pada tampilan mobile */
}
.tongtji-news-title {
font-size: 1.3rem;
}
.tongtji-news-tags {
font-size: 0.7rem !important;
}
.tongtji-news-swiper-modal {
width: 350px;
max-width: 350px;
}
.tongtji-news-swiper-modal .swiper-slide img {
width:60%;
max-height: 350px;
}
.tongtji-news-image-wrapper {
width: 350px;
}
.news-image {
max-width: 100%;
max-height: 100%;
}
.hover-text-blog {
width: 100%;
font-size: 8px;
}
}
/* List News background */
.list-news {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: left;
text-align: left;
color: white;
padding: 0 5%;
position: relative;
overflow: hidden;
}
.list-news h1 {
font-size: 4rem;
font-weight: normal;
}
.list-news h2 {
font-size: 2rem;
margin-bottom: 1rem;
font-weight: normal;
text-align: left;
color: white;
}
.list-news h1 .bold{
font-weight: bold;
}
.list-news p {
font-size: 1.2rem;
margin-bottom: 2rem;
font-weight: normal;
width: 60%;
}
.list-news-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: 1; /* Tambahkan ini */
}
.list-news-img.active {
opacity: 1;
}
/* Tambahkan ini untuk pastikan teks di atas gambar */
.list-news-content {
position: relative;
z-index: 2;
}
@media (max-width: 1024px) {
.list-news {
height: 40vh; /* Reduce height on smaller devices */
}
.list-news h1 {
font-size: 2rem; /* Smaller heading on mobile */
}
.list-news h2 {
font-size: 1rem; /* Smaller heading on mobile */
}
.list-news p {
font-size: 1rem; /* Smaller text on mobile */
}
}
@media (max-width: 820px) {
.list-news {
height: 40vh; /* Reduce height on smaller devices */
}
.list-news h1 {
font-size: 2rem; /* Smaller heading on mobile */
}
.list-news h2 {
font-size: 1rem; /* Smaller heading on mobile */
}
.list-news p {
font-size: 1rem; /* Smaller text on mobile */
}
}
@media screen and (max-width: 768px) {
.list-news {
height: 50vh; /* Reduce height on smaller devices */
}
.list-news h1 {
font-size: 2rem; /* Smaller heading on mobile */
}
.list-news h2 {
font-size: 1rem; /* Smaller heading on mobile */
}
.list-news p {
font-size: 1rem; /* Smaller text on mobile */
}
}
@media (max-width: 480px) {
.list-news {
height: 40vh; /* Reduce height on smaller devices */
}
.list-news h1 {
font-size: 1.5rem; /* Smaller heading on mobile */
}
.list-news h2 {
font-size: 0.8rem; /* Smaller heading on mobile */
}
.list-news p {
font-size: 0.7rem; /* Smaller text on mobile */
}
}
/* List News Item */
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, auto);
gap: 20px;
width: 100%;
}
.news-item {
width: 100%;
margin-bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.news-image-container {
width: 100%;
max-width: 280px;
height: 280px;
overflow: hidden;
border-radius: 20px;
margin-bottom: 15px;
position: relative; /* Diperlukan agar ::after posisinya relatif ke container */
}
.news-image-container::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60%; /* Tinggi gradien */
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
z-index: 2;
border-radius: 0 0 20px 20px; /* Ikuti bentuk container kalau perlu */
}
.news-caption {
position: absolute;
bottom: 5px;
left: 15px;
right: 15px;
z-index: 3; /* Lebih tinggi dari gradient (z-index: 2) */
color: white;
font-size: 1rem;
font-weight: 500;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
text-align: center;
}
.news-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: relative;
z-index: 1; /* Supaya gambar tetap tampil, tapi berada di bawah gradient */
}
/* Pagination Styling */
.pagination-container {
display: flex;
justify-content: center;
margin-top: 40px;
margin-bottom: 30px;
}
/* Laravel's default pagination classes */
.pagination {
display: flex;
padding-left: 0;
list-style: none;
border-radius: 0.25rem;
}
.pagination li {
margin: 0 5px;
}
.pagination li a, .pagination li span {
position: relative;
display: block;
padding: 0.5rem 1rem;
margin-left: -1px;
line-height: 1.25;
color: #333;
background-color: #f7f7f7;
border: 1px solid #ddd;
border-radius: 5px;
text-decoration: none;
transition: all 0.3s ease;
font-weight: 500;
}
/* Menghilangkan panah dan hanya menampilkan tombol Prev dan Next */
.pagination .prev, .pagination .next {
font-weight: bold;
background: none;
border: none;
text-transform: uppercase;
}
.pagination li.active span {
z-index: 1;
color: #fff;
background-color: rgba(44, 145, 68, 1) !important; /* Warna aktif menggunakan rgba(44, 145, 68, 1) */
border-color: rgba(44, 145, 68, 1) !important; /* Border warna aktif */
}
.pagination li a:hover, .pagination li.active a {
background-color: rgba(44, 145, 68, 1) !important; /* Hover dengan warna yang sama */
color: #fff; /* Warna teks putih saat hover */
}
.pagination li.disabled span {
color: #aaa;
pointer-events: none;
background-color: #f7f7f7;
border-color: #ddd;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.pagination li a, .pagination li span {
padding: 0.5rem 1rem;
}
}
@media (max-width: 768px) {
.pagination li a, .pagination li span {
padding: 0.5rem 0.75rem;
}
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.news-item {
min-width: 250px;
}
.news-image-container {
max-width: 250px;
height: 250px;
}
}
@media (max-width: 820px) {
.news-item {
min-width: 220px;
}
.news-image-container {
max-width: 220px;
height: 220px;
}
}
@media (max-width: 769px) {
.news-grid {
justify-content: space-between;
display: grid;
grid-template-columns: repeat(3, 1fr); /* Membuat 3 kolom */
gap: 20px;
}
.news-item {
min-width: 100%; /* Mengatur agar item berita memenuhi ruang */
display: flex;
flex-direction: column;
align-items: center;
}
.news-image-container {
width: 100%;
max-width: 220px;
height: 220px;
}
.news-caption {
font-size: 0.9rem; /* Mengatur ukuran font agar lebih kecil di layar ponsel */
}
.news-image-container::after {
display: block;
}
}
@media (max-width: 576px) {
.news-grid {
justify-content: space-between;
display: grid;
grid-template-columns: repeat(3, 1fr); /* Membuat 3 kolom */
gap: 5px;
}
.news-item {
min-width: 100%; /* Mengatur agar item berita memenuhi ruang */
display: flex;
flex-direction: column;
align-items: center;
}
.news-image-container {
width: 100%;
max-width: 120px;
height: 120px;
}
.news-caption-mobile {
font-size: 0.7rem; /* Mengatur ukuran font agar lebih kecil di layar ponsel */
}
.news-image-container::after {
display: none ;
}
}
/* Search Page */
#search{
padding-bottom: 10px;
}
/* Hasil Pencarian Berita Page */
#blog{
padding-top: 1px;
padding-bottom: 1px;
}
.image-grid-page {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 5px;
width: 100%; /* Pastikan kontainer mengambil seluruh lebar */
box-sizing: border-box;
}
.grid-item-page {
flex: 1 1 22%; /* Memberikan lebar 22% untuk setiap item */
margin-bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box; /* Menghitung margin dan padding dalam lebar elemen */
}
.image-container-page {
width: 100%;
max-width: 218px;
height: 218px;
overflow: hidden;
border-radius: 20px;
margin-bottom: 15px;
}
.image-container-page img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.grid-item-page h3 {
margin-bottom: 15px;
font-size: 18px;
text-align: center;
width: 100%;
max-width: 280px;
text-decoration: bold;
}
@media (max-width: 1024px) {
.grid-item-page {
flex: 1 1 30%; /* Membuat 4 item per baris */
flex-wrap: wrap;
}
.image-container-page {
max-width: 180px;
height: 180px;
}
}
@media (max-width: 768px) {
.image-grid-page {
justify-content: center;
flex-wrap: wrap;
}
.grid-item-page {
flex: 1 1 30%; /* Membuat 2 item per baris */
flex-wrap: wrap;
}
.image-container-page {
max-width: 150px;
height: 150px;
}
}
@media (max-width: 576px) {
.grid-item-page {
flex: 1 1 30%; /* Membuat 2 item per baris */
flex-wrap: wrap;
}
.image-container-page {
max-width: 80px;
height: 80px;
}
.grid-item-page h3 {
font-size: 10px;
}
}
/* Selengkapnya Button */
#more {
display: flex;
align-items: center;
justify-content: center;
padding-top: 1px;
}
#more::before,
#more::after {
content: "";
flex: 1;
border-bottom: 1px solid rgba(44, 145, 68, 1);
margin: 0 0px;
}
/* Pencarian */
#pencarian{
padding-top: 1px;
}
.hasil{
padding-top: 1px;
padding-bottom: 10px;
}
#pencarian h2{
text-align: left;
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 5px;
}
#pencarian p{
text-align: left;
}
@media (max-width: 768px) {
#pencarian h2{
font-size: 1.2rem;
}
#pencarian p{
font-size: 0.7rem;
}
}