/* General Body Styles */ body { font-family: 'Poppins', sans-serif; /* Example font */ color: #333; line-height: 1.6; } /* Hero Section */ /* Hero Section Styling */ .hero-section { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/hero-bg2.jpg') no-repeat center center/cover; /* Penjelasan: - linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)): Ini adalah overlay hitam semi-transparan. Ini penting agar teks putih Anda tetap terbaca dengan jelas di atas gambar. Angka 0.5 bisa Anda sesuaikan (misal 0.3 untuk lebih terang, 0.7 untuk lebih gelap). - url('../images/hero-background.jpg'): Ganti dengan path ke gambar latar belakang Anda. ('../' berarti naik satu folder dari folder 'css' ke root, lalu masuk ke folder 'images'). - no-repeat: Gambar tidak akan diulang. - center center: Gambar akan dipusatkan secara horizontal dan vertikal. - /cover: Gambar akan menutupi seluruh area elemen, mungkin terpotong tapi tidak akan ada ruang kosong. */ min-height: 100vh; /* Sesuaikan tinggi minimal section (70% dari viewport height) */ display: flex; align-items: center; justify-content: center; position: relative; /* Penting jika ada elemen yang menggunakan position: absolute di dalamnya */ color: white; /* Pastikan teks di hero section berwarna putih */ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Tambahkan shadow agar teks lebih menonjol */ } @media (max-width: 768px) { .hero-section { height: 100vh; /* Untuk lebih akurat di browser HP */ } .hero-content { max-width: 90%; } } /* Pastikan Font Awesome CSS sudah terhubung di index.php Anda */ /* */ /* .hero-section { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/hero-bg.jpg') no-repeat center center/cover; min-height: 80vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; /* For any animation overflows */ .hero-section h1 { font-size: 4.5rem; font-weight: 700; text-shadow: 2px 2px 8px rgba(0,0,0,0.7); } .hero-section p { font-size: 1.5rem; font-weight: 300; } /* Section Headings */ h2 { font-size: 3rem; font-weight: 700; color: #007bff; /* Primary Bootstrap color */ } /* Cards (Packages) */ .card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .card-img-top { height: 200px; object-fit: cover; } /* Floating WhatsApp Button */ .whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 40px; right: 40px; background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center; font-size: 30px; box-shadow: 2px 2px 3px #999; z-index: 1000; /* Ensure it's above other content */ display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .whatsapp-float:hover { color: #FFF; /* Keep color white on hover */ transform: scale(1.1); } /* Responsive Adjustments */ @media (max-width: 768px) { .hero-section h1 { font-size: 3rem; } .hero-section p { font-size: 1.2rem; } .whatsapp-float { width: 50px; height: 50px; bottom: 20px; right: 20px; font-size: 25px; } } /* Google Maps Container for Responsiveness */ .map-container { overflow: hidden; padding-bottom: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ position: relative; height: 0; } .map-container iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; } /* You might want to adjust the map-container directly instead of the padding-bottom trick if you prefer a fixed height as set in the iframe, then just use: */ .map-container { height: 450px; /* Or the height you set in your iframe */ width: 100%; overflow: hidden; /* To ensure content inside doesn't spill */ border-radius: 8px; /* Optional: adds rounded corners to the map */ box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: adds a subtle shadow */ } .map-container iframe { /* No need for position: absolute if height is set on parent */ width: 100%; height: 100%; } /* Gallery Card Specifics */ .gallery-card { position: relative; overflow: hidden; cursor: pointer; } .gallery-card img { display: block; width: 100%; height: 300px; /* Adjust as needed */ object-fit: cover; transition: transform 0.3s ease-in-out; } .gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */ display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease-in-out; } .gallery-card:hover .gallery-overlay { opacity: 1; } .gallery-card:hover img { transform: scale(1.05); /* Slight zoom effect on hover */ } .gallery-text { color: #fff; font-size: 1.5rem; font-weight: bold; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); } /* Custom Card for Key Features Section */ .card-custom { border: 1px solid #e0e0e0; border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-custom:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .card-custom .card-icon { font-size: 3.5rem; /* Size of the icon */ color: #007bff; /* Primary color for the icon */ margin-bottom: 15px; } .card-custom .card-title { font-size: 1.6rem; color: #343a40; /* Darker text for title */ } .card-custom .card-text { font-size: 1rem; color: #6c757d; /* Lighter text for description */ } /*footer /* Footer Styling */ footer { /* Background and text colors are already handled by Bootstrap classes bg-dark and text-white */ /* Add padding and shadows for a subtle lift */ padding-top: 3rem; padding-bottom: 3rem; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow at the top of the footer */ } footer h5 { color: var(--bs-primary); /* Use Bootstrap's primary color for headings, if defined */ margin-bottom: 1.5rem; font-weight: bold; } footer p { font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); /* Slightly less bright white for body text */ } footer .list-unstyled li a { transition: color 0.3s ease-in-out; padding: 0.25rem 0; /* Add a little vertical padding for clickability */ display: inline-block; /* Make padding effective */ } footer .list-unstyled li a:hover { color: var(--bs-primary) !important; /* Change link color on hover to primary color */ /* If you don't have --bs-primary defined, use a specific color like #007bff */ } /* Social Icons Styling */ .social-icons a { color: white; /* Ensure icons are white */ transition: color 0.3s ease-in-out; margin-right: 0.5rem; /* Space between icons */ } .social-icons a:hover { color: var(--bs-primary) !important; /* Change icon color on hover */ } /* Horizontal Rule (Divider) */ footer hr.border-secondary { border-color: rgba(255, 255, 255, 0.2) !important; /* Lighter border for contrast */ margin-top: 2.5rem; margin-bottom: 2.5rem; } /* Copyright Text */ footer .mb-0 { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); /* Even lighter for copyright */ } /* effect ikan */ .fish-container { position: fixed; /* Membuat ikan tetap di latar belakang saat di-scroll */ top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* Membuat ikan tidak mengganggu interaksi dengan elemen lain */ z-index: -1; /* Menempatkan ikan di belakang konten lain */ overflow: hidden; /* Menyembunyikan ikan yang keluar dari layar */ } .fish { position: absolute; background-color: #ADD8E6; /* Warna biru muda seperti air */ border-radius: 50%; opacity: 0.7; } .fish::before { content: ''; position: absolute; top: 50%; right: -10px; width: 0; height: 0; border-left: 20px solid #ADD8E6; border-top: 10px solid transparent; border-bottom: 10px solid transparent; transform: translateY(-50%); } .fish1 { width: 50px; height: 30px; top: 20%; left: 10%; animation: swim1 10s linear infinite, drift 5s ease-in-out infinite alternate; } .fish2 { width: 40px; height: 25px; top: 50%; right: 5%; animation: swim2 12s linear infinite, drift 7s ease-in-out infinite alternate; } .fish3 { width: 60px; height: 35px; bottom: 15%; left: 30%; animation: swim3 15s linear infinite, drift 6s ease-in-out infinite alternate; } /* Tambahkan lebih banyak gaya untuk ikan lain jika Anda menambahkannya */ @keyframes swim1 { 0% { transform: translateX(0); } 100% { transform: translateX(calc(100vw + 50px)); } } @keyframes swim2 { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100vw - 40px)); } } @keyframes swim3 { 0% { transform: translateX(0); } 100% { transform: translateX(calc(100vw + 60px)); } } @keyframes drift { 0% { transform: translateY(0); } 100% { transform: translateY(20px); } } /* General Section Heading Styling (Optional, but good for consistency) */ .section-heading { position: relative; padding-bottom: 15px; } .section-heading::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 80px; height: 4px; background-color: var(--bs-primary); /* Use Bootstrap primary color */ border-radius: 2px; } /* Testimonials Section Specifics */ .testimonial-card { max-width: 700px; background: #fff; border-radius: 15px; /* Slightly more rounded corners */ padding: 40px; /* More padding */ margin-bottom: 50px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); /* More pronounced shadow */ transition: transform 0.3s ease-in-out; } .testimonial-card:hover { transform: translateY(-8px); /* Lift effect on hover */ } .testimonial-avatar { width: 90px; /* Slightly larger avatar */ height: 90px; object-fit: cover; border: 4px solid var(--bs-primary); /* Thicker border */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow on avatar */ } .testimonial-text { font-size: 1.3rem; /* Slightly larger font for the quote */ color: #343a40; /* Darker text for better readability */ line-height: 1.7; margin-bottom: 25px; /* More space before author */ position: relative; padding-top: 20px; /* Space for pseudo-element quote mark */ } /* Adding custom quote marks with pseudo-elements */ .testimonial-text::before { content: "\201C"; /* Left double quotation mark */ font-family: serif; /* Use a classic font for quotes */ font-size: 5rem; /* Large quote mark */ color: rgba(0, 123, 255, 0.1); /* Very light primary color for subtle background */ position: absolute; top: -10px; left: 50%; transform: translateX(-50%); line-height: 1; z-index: 1; /* Above text for slight overlap if needed */ } .testimonial-text::after { content: "\201D"; /* Right double quotation mark */ font-family: serif; font-size: 5rem; color: rgba(0, 123, 255, 0.1); position: absolute; bottom: -30px; /* Position below text */ right: 50%; /* Adjust right position for centering */ transform: translateX(50%); /* Adjust to center properly */ line-height: 1; z-index: 1; } .testimonial-author { font-size: 1rem; color: #6c757d; font-weight: 500; } .testimonial-author cite { font-style: normal; font-weight: bold; color: var(--bs-primary); /* Primary color for origin */ } .star-rating { color: #ffc107; /* Gold color for stars */ font-size: 1.5rem; /* Larger stars */ margin-top: 15px; } /* Carousel Indicators Styling */ .carousel-indicators [data-bs-target] { background-color: var(--bs-primary); width: 12px; /* Slightly larger indicators */ height: 12px; border-radius: 50%; border: 0; opacity: 0.4; transition: opacity 0.3s ease, background-color 0.3s ease; } .carousel-indicators .active { opacity: 1; background-color: var(--bs-primary); } /* Carousel Control Icons */ .carousel-control-prev-icon, .carousel-control-next-icon { background-color: var(--bs-primary); border-radius: 50%; padding: 12px; /* Larger padding for icons */ box-shadow: 0 2px 5px rgba(0,0,0,0.2); opacity: 0.8; transition: opacity 0.3s ease, background-color 0.3s ease; } .carousel-control-prev-icon:hover, .carousel-control-next-icon:hover { opacity: 1; background-color: #0056b3; /* Darker shade on hover */ } /* Carousel Indicators Styling */ .carousel-indicators [data-bs-target] { background-color: var(--bs-primary); /* Warna indicator sesuai primary color */ width: 10px; height: 10px; border-radius: 50%; /* Bentuk lingkaran */ border: 0; opacity: 0.5; transition: opacity 0.3s ease; } .carousel-indicators .active { opacity: 1; } /* Carousel Control Icons (Optional, if you want to customize beyond Bootstrap defaults) */ .carousel-control-prev-icon, .carousel-control-next-icon { background-color: var(--bs-primary); /* Ganti warna panah navigasi */ border-radius: 50%; padding: 10px; } /* Call to Action Section Background */ .cta-section-bg { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), /* Darker overlay */ url('../images/info-fullday.jpg') no-repeat center center/cover; min-height: 400px; /* Adjust height as needed */ display: flex; align-items: center; justify-content: center; position: relative; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Enhance text readability */ /* You might want to remove padding-top/bottom here if py-5 is enough */ } /* Custom CTA Button Styling */ .custom-cta-button { background-color: var(--bs-primary); /* Use your brand's primary color */ border-color: var(--bs-primary); color: white; /* Ensure text is white */ font-size: 1.3rem; /* Larger font size */ padding: 15px 40px; /* More padding */ border-radius: 50px; /* Pill-shaped button */ font-weight: bold; transition: all 0.3s ease-in-out; box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); /* Subtle shadow for depth */ } .custom-cta-button:hover { background-color: #0056b3; /* Darker shade on hover */ border-color: #0056b3; transform: translateY(-3px); /* Subtle lift effect */ box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4); /* Enhanced shadow on hover */ } /* youtube */ /* Responsive YouTube Video */ .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio (9 / 16 = 0.5625) */ height: 0; overflow: hidden; max-width: 100%; background: #000; /* Fallback background for loading */ border-radius: 8px; /* Optional: Rounded corners for the video box */ } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Optional: Subtle shadow on hover for video */ .video-container:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important; transform: translateY(-2px); transition: all 0.3s ease-in-out; }