<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Saring Daring</title>
  <link rel="icon" type="image/x-icon" href="assets/saringdaring-logo.ico">

  <!-- Bootstrap CSS -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css?v=<?php echo time(); ?>">
</head>
<body>

<nav class="navbar navbar-expand-lg bg-white shadow-sm sticky-top">
  <div class="container">
    <!-- Logo -->
    <a class="navbar-brand" href="#">
      <img src="assets/saringdaring-logo.png" alt="Logo" height="60px">
    </a>
    <!-- Toggler -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Menu -->
    <div class="collapse navbar-collapse text-center" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#sec-tentang-saringdaring">Tentang Saring Daring</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sec-kompetisi">Kompetisi</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sec-program">Program</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sec-pendaftaran">Pendaftaran</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sec-peta">Peta Partisipan</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sec-asah-digital">Asah Digital</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sec-galeri">Kampanye</a>
        </li>
        <li class="nav-item me-2">
          <a class="nav-link" href="#sec-faq">FAQ</a>
        </li>
        <li class="nav-item">
          <a class="nav-link daftar" href="#sec-daftar">Daftar</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid p-0">
	<div class="container-fluid p-0">
	  <div id="carouselExampleIndicators" class="carousel slide">
	    <div class="carousel-indicators">
	      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
	      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
	      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
	      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
	      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
	    </div>
	    <div class="carousel-inner">
	      <div class="carousel-item active">
	        <img src="assets/hero-1-min.png" class="d-block w-100" alt="...">
	      </div>
	      <div class="carousel-item">
	        <img src="assets/hero-2.jpg" class="d-block w-100" alt="...">
	      </div>
	      <div class="carousel-item">
	        <img src="assets/hero-3.jpg" class="d-block w-100" alt="...">
	      </div>
	      <div class="carousel-item">
	        <img src="assets/hero-4.jpg" class="d-block w-100" alt="...">
	      </div>
	      <div class="carousel-item">
	        <img src="assets/hero-5.jpg" class="d-block w-100" alt="...">
	      </div>
	    </div>
	    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
	      <img src="assets/arrow-left.png">
	      <span class="visually-hidden">Previous</span>
	    </button>
	    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
	      <img src="assets/arrow-right.png">
	      <span class="visually-hidden">Next</span>
	    </button>
	  </div>
	</div>
</div>
<div class="container-fluid bg-blue">
	<div class="container">
		<div class="row">
			<div class="col-md-10 mt-3 mb-3">
			  <p class="text-white fs-15 fw-400 mb-2">
			    Dipersembahkan Oleh:
			  </p>
			  <a href="https://www.usaid.gov/id/indonesia" target="_BLANK">
			  	<img class="imgper" src="assets/usaid.png">
			  </a>
			  &nbsp;&nbsp;&nbsp;
			  <a href="https://indonesia.fb.com/inisiatif-melek-digital/" target="_BLANK">
			  	<img class="imgper" src="assets/meta_asah_logo.png">
			  </a>
			</div>
			<div class="col-md-2 mt-3 mb-3">
			  <p class="text-white fs-15 fw-400 mb-2">
			    Didukung Oleh:
			  </p>
			  <a href="https://www.lovefrankie.co/" target="_BLANK">
			  	<img class="imgduk" src="assets/lovefrankie-logo.png">
			  </a>
			</div>

		</div>
	</div>
</div>


<!-- TENTANG -->
<section id="sec-tentang-saringdaring">
	<div class="container-fluid position-relative">
		<div class="container mt-custom">
		  <div class="row position-relative" >
		    <div class="col-md-7 order-2 order-md-1 img-bg-1 mt-3 mt-md-5 py-5 px-3">
		      
		    	<img 
				    src="assets/yt-1.png" 
				    class="youtube-vid" 
				    alt="YouTube Video Thumbnail" 
				    onclick="playVideo()" 
				    style="width: 100%; max-width: 100%; height: auto; cursor: pointer; display: block; object-fit: contain;">

				  <!-- YouTube Video -->
				  <iframe 
				    id="youtube-video" 
				    src="" 
				    title="YouTube video player" 
				    frameborder="0" 
				    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
				    referrerpolicy="strict-origin-when-cross-origin" 
				    allowfullscreen 
				    style="display: none; width: 100%; height: auto; max-width: 100%;">
				  </iframe>
		    </div>
		    <div class="col-md-5 order-1 order-md-2 mt-5 mt-md-5 px-3">
		      <h1 class=""><span class="fw-300 fs-48 text-grey">Tentang</span> <br/> <span class="fw-700 fs-64 text-red" >Saring Daring</span></h1>
		      <div class="short-border-yellow mb-3"></div>
		      <p class="fw-300 fs-24 text-grey">
		      	Halo, Sobat Daring!
				Selamat datang di Saring Daring University Challenge Indonesia—program edukasi peningkatan kapasitas sekaligus kompetisi nasional buat mahasiswa!
			</p>
			<p class="fw-300 fs-24 text-grey">
				Di sini, kamu akan belajar tentang literasi digital dan berpikir kritis sambil merancang kampanye digital kreatif dari isu nyata yang ada di masyarakat.
			</p>
			<p class="fw-300 fs-24 text-grey">
				Mulai dari mengenali informasi yang kredibel hingga melawan hoaks, kamu akan diajak menggali ide-ide segar untuk mempromosikan literasi digital yang positif dan kritis di era media sosial.
		      </p>
		    </div>
		  </div>
		</div>
		<div class="col-12 col-md-7 offset-md-5 order-3 order-md-3 pr-0 backimgdotted-1">
		    <img src="assets/dotted.png" class="w-100">
		</div>
	</div>
</section>



<!-- KOMPETISI -->
<section id="sec-kompetisi">
	<div class="container-fluid position-relative">
		<div class="container mt-custom">
		  <div class="row position-relative" >
		    
		    <div class="col-md-5 order-1 order-md-1 mt-5 mt-md-5 px-3 d-flex flex-column justify-content-center">
			    <h1 class=""><span class="fw-300 fs-48">Kompetisi</span> <br/> <span style="font-weight: 700;" class="text-blue fs-64">Saring Daring</span></h1>
			    <div class="short-border-red mb-3"></div>
			    <p class="fw-300 fs-24">
			        Program ini nggak cuma belajar, tapi juga menantang kamu untuk merancang kampanye digital dengan hadiah total <b class="fw-600">Rp21.000.000!</b> 🎉✨
			    </p>
			    <p class="fw-300 fs-24">
			        Jadi, selain menambah ilmu, kamu juga berkesempatan menciptakan karya yang impactful dan relevan.
			    </p>
			</div>
		    <div class="col-md-6 offset-md-1 order-3 order-md-3 mt-3 mt-md-5 px-3 pt-5">
		    	<img src="assets/kompetisi.png" style="width: 100%; max-width: 100%; height: auto; cursor: pointer; display: block; object-fit: contain;">
		    </div>
		  
		  </div>
		</div>
		<div class="col-12 col-md-7 order-2 order-md-3 pr-0 backimgdotted-2">
	        <img src="assets/dotted.png" class="w-100">
	    </div>
	</div>
</section>
<!-- END KOMPETISI -->


<!-- KAMPANYE -->
<div class="container-fluid p-0 pb-3 position-relative">
	<div class="col-11 back-red"></div>
	<div class="col-4 back-eclipse"></div>
	<div class="container mt-custom">
		<div class="row">
			<div class="col-12 mt-4 mb-2">
				<h4 class="text-md-center">
					<span class="fw-300 text-white fs-28">Bikin Kampanye Yang</span><br/><b class="text-white fs-28 fw-500">Seru dan Berdampak!</b>
				</h4>
			</div>
			<div class="col-md-3">
				<div class="col-md-12 box-campaign rounded p-4 text-red">
					<h5 class="mb-3 text-uppercase fs-20 fw-700">Buat Strategi Kampanye 1 Bulan</h5>
					<p class="text-red fs-18 fw-300">Rancang kampanye media sosial yang berjalan selama 1 bulan. Fokusnya? Meningkatkan literasi digital!</p>

					<p class="text-red fs-18 fw-300">Siapkan konten yang menarik dan jadwal posting yang tepat. Tim terpilih akan menerima dana produksi hingga <b class="fw-700 text-red">Rp5.000.000</b> untuk mewujudkan ide mereka dan mentorship dari <b class="fw-700 text-red">Meta Mates</b>.</p>
				</div>
			</div>
			<div class="col-md-3">
				<div class="col-md-12 box-campaign rounded p-4 text-red">
					<h5 class="mb-3 text-uppercase fs-20 fw-700">Jawab Masalah Dari CSO</h5>
					<p class="text-red fs-18 fw-300">Kampanye kamu harus bisa menjawab masalah yang diberikan Organisasi Masyarakat Sipil (OMS).</p>

					<p class="text-red fs-18 fw-300">Misalnya, bagaimana cara melawan hoaks atau meningkatkan kesadaran bermedia sosial dengan bijak, partisipasi demokrasi digital, atau masalah-masalah lain yang akan diberikan ke team kamu.</p>
				</div>
			</div>
			<div class="col-md-3">
				<div class="col-md-12 box-campaign rounded p-4 text-red">
					<h5 class="mb-3 text-uppercase fs-20 fw-700">Kreatif dan Iteraktif</h5>
					<p class="text-red fs-18 fw-300">Kampanye kamu harus beda! Bikin yang kreatif, seru, dan bikin orang ingin ikut terlibat.</p>

					<p class="text-red fs-18 fw-300">Pakai meme, video, kuis—bebas, yang penting asyik!</p>
				</div>
			</div>
			<div class="col-md-3">
				<div class="col-md-12 box-campaign rounded p-4 text-red">
					<h5 class="mb-3 text-uppercase fs-20 fw-700">Gunakan Platform Meta dan Targetkan Audiens Nyata</h5>
					<p class="text-red fs-18 fw-300">Jalankan kampanye di platform Meta (seperti Facebook atau Instagram).</p>

					<p class="text-red fs-18 fw-300">Pastikan kamu menyasar audiens yang relevan, bukan cuma teman dekat.</p>
				</div>
			</div>
			<div class="col-12 mt-2">
				<h5 class="fs-24 fw-300 text-md-center text-white">
					Gampang, kan? Yuk, bikin kampanye yang seru dan bermanfaat! 🎉
				</h5>
			</div>
			
		</div>
	</div>
</div>
<!-- END KAMPANYE -->

<section id="sec-program">
	<div class="container pt-3 mt-custom">
		<h1 class="">
			<span class="fs-48 fw-300">Tahap</span> <br/> <span class="fs-48 fw-500 text-dark">Program</span>
		</h1>
		<div class="short-border-blue "></div>
		<div class="row">
			<div class="col-md-4 mt-5">
				<div class="row">
					<div class="col-8">
						<div class="col-12 bg-blue  rounded p-2">
							<span class="text-white fs-16 fw-700">
								Tahap 1
							</span>
							<br/>
							<span class="text-white fs-24 fw-700">
								Pendaftaran & Pengenalan
							</span>
						</div>
					</div>
					<div class="col-4 d-flex justify-content-center align-items-center">
					    <img src="assets/red-triangle.png" class="w-50 red-triangle">
					</div>
					<div class="col-12">
						<i class="fa-solid fa-circle thedotestep"></i>
					</div>
					<div class="col-12">
						<div class="col-12 thelinestep">
							
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-12">
						<div class="col-12 rounded-4 border borded-blue mt-4 p-3 akomthp">
							<p class="fs-20 fw-600 mb-2">✨ Pendaftaran (10 Februari - 4 Maret 2025)</p>
							<p class="fs-20 fw-400 mb-5">Kumpulkan tim kalian (maksimal 3 orang) untuk mewakili universitas! Nggak harus dari jurusan atau angkatan yang sama, yang penting dari FISIP/Humaniora. Ayo daftar sekarang dan tunjukkan semangat kalian!</p>
							
							<p class="fs-20 fw-600 mb-2">✨ Onboarding (April 2025)</p>
							<p class="fs-20 fw-400 mb-5"> 
							Selamat datang di WhatsApp Community Saring Daring! Di sini tempat kalian akan berinteraksi dan belajar bareng sepanjang program.
							</p>
							<p class="fs-20 fw-600 mb-2">✨ Masterclass (April - Mei 2025)</p>
							<p class="fs-20 fw-400">Kalian bakal belajar dari para ahli tentang literasi digital, cara berpikir kritis, dan menghubungkannya ke strategi kampanye sosial. Semua dilakukan online, jadi fleksibel banget!</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-4 mt-5">
				<div class="row">
					<div class="col-8">
						<div class="col-12 bg-yellow  rounded p-2">
							<span class="text-white fs-16 fw-700">
								Tahap 2
							</span>
							<br/>
							<span class="text-white fs-24 fw-700">
								Kompetisi Bagian Pertama
							</span>
						</div>
					</div>
					<div class="col-4 d-flex justify-content-center align-items-center">
					    <img src="assets/red-triangle.png" class="w-50 red-triangle">
					</div>
					<div class="col-12">
						<i class="fa-solid fa-circle thedotestep"></i>
					</div>
					<div class="col-12">
						<div class="col-12 thelinestep">
							
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-12">
						<div class="col-12 rounded-4 border borded-yellow mt-4 p-3 akomthp">
							<p class="fs-20 fw-600 mb-2">🚀 Pengembangan Proposal Kampanye & Pitching (Mei - Juni 2025)</p>
							<p class="fs-20 fw-400 mb-5">Bikin proposal kampanye kalian berdasarkan isu nyata yang disampaikan oleh challenge owner kalian - Organisasi Masyarakat Sipil (OMS)! Nanti, kalian bakal pitching di depan panel juri. Siapkan ide terbaik yang bisa bikin ‘client’ terpukau!</p>
							
							<p class="fs-20 fw-600 mb-2">🎯 Bootcamp (Agustus 2025)</p>
							<p class="fs-20 fw-400"> 
							Buat yang lolos tahap Pitching, akan diundang untuk Bootcamp seru di Jakarta! Kalian akan belajar cara bikin dan menyampaikan kampanye sosial yang efektif. Jangan lupa bawa energi positif kalian, ya!
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-4 mt-5">
				<div class="row">
					<div class="col-8">
						<div class="col-12 bg-red  rounded p-2">
							<span class="text-white fs-16 fw-700">
								Tahap 3
							</span>
							<br/>
							<span class="text-white fs-24 fw-700">
								Kompetisi Bagian Kedua
							</span>
						</div>
					</div>
					<div class="col-12">
						<i class="fa-solid fa-circle thedotestep"></i>
					</div>
					<div class="col-12">
						<div class="col-12 thelinestep">
							
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-12">

						<div class="col-12 rounded-4 border borded-red mt-4 p-3 akomthp">
							<p class="fs-20 fw-600 mb-2">🎬 Produksi Kampanye & Bimbingan (Agustus - Oktober 2025)</p>
							<p class="fs-20 fw-400 mb-5">Tim terbaik dari tiap universitas akan dapat bimbingan dan dukungan dana buat memproduksi
	kampanye mereka. Saatnya kalian menunjukkan aksi nyata!</p>
							
							<p class="fs-20 fw-600 mb-2">🏆 National Summit (Oktober 2025)</p>
							<p class="fs-20 fw-400 mb-4"> 
							Finalis bakal tampil di National Summit Jakarta! Ini kesempatan kalian buat pamer hasil kampanye dan dampak luar biasa yang kalian ciptakan.
							</p>
							<p class="fs-20 fw-400">
							Ayo, tunggu apa lagi? Mari bikin perubahan dan jadikan kampanye kalian yang terbaik! 💪
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>







<!-- NATIONAL SUMMIT -->

<div class="container-fluid p-0 pb-3 position-relative">
	<div class="col-9 back-blue">
		
	</div>
	<div class="col-4 back-eclipse-2"></div>
	<div class="container mt-custom">
		<div class="row ms-3">
			
			<div class="row position-relative" >
			    <div class="col-md-7 order-2 order-md-1 mt-3 mt-md-5 py-5 px-3">
			      
			    	<img 
					    src="assets/yt-1.png" 
					    class="youtube-vid2" 
					    alt="YouTube Video Thumbnail" 
					    onclick="playVideo2()" 
					    style="width: 100%; max-width: 100%; height: auto; cursor: pointer; display: block; object-fit: contain;">

					  <!-- YouTube Video -->
					  <iframe 
					    id="youtube-video2" 
					    src="" 
					    title="YouTube video player" 
					    frameborder="0" 
					    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
					    referrerpolicy="strict-origin-when-cross-origin" 
					    allowfullscreen 
					    style="display: none; width: 100%; height: auto; max-width: 100%;">
					  </iframe>
			    </div>
			    <div class="col-md-5 order-1 order-md-2 mt-5 mt-md-5 px-3 position-relative d-flex flex-column justify-content-center align-items-center text-center">
				    <img src="assets/piala.png" class="w-50">
				    <h5 class="mt-4 text-white fs-24 fw-400 ln-1-5">
				        Pemenang utama akan <br/>mendapatkan hadiah sebesar <br/>
				        <span class="text-white fw-600">Rp21.000.000!</span> 🎉 ✨
				    </h5>
				</div>
			  </div>
			
		</div>
	</div>
	<div class="col order-3 order-md-3 pr-0 dotblue-1">
	    <img src="assets/dotblue-1.png" class="w-100">
	</div>
	<div class="col order-3 order-md-3 pr-0 dotblue-2">
	    <img src="assets/dotblue-2.png" class="w-100">
	</div>
</div>
<!-- NATIONAL SUMMIT -->


<!-- PERSYARATAN -->

<section id="sec-pendaftaran">
	<div class="container-fluid p-0 bg-red position-relative">
		<div class="container py-5 mt-custom">
			<div class="row">
				<div class="col-md-12">
					<h1 class="text-center">
						<span class="fw-300 fs-48 text-white">Persyaratan</span> <br/> <span class="fs-48 fw-500 text-white">Pendaftaran</span>
					</h1>
					<div class="short-border-blue-center mb-5"></div>
				</div>
				<div class="col-md-10 offset-md-1">
    <div class="row justify-content-center">
        <div class="col-12 col-md-6 order-2 order-md-1 d-flex justify-content-center align-items-center">
            <img src="assets/pendaftaran.png" class="w-100">
        </div>
        <div class="col-12 col-md-6 order-1 order-md-2 d-flex flex-column justify-content-center align-items-center">
            <p>
                <ol>
                    <li class="fs-18 text-white">Berusia 18 tahun ke atas.</li>
                    <li class="fs-18 text-white">Mahasiswa aktif dari Fakultas Ilmu Sosial dan Politik di salah satu dari 10 universitas mitra.</li>
                    <li class="fs-18 text-white">Memiliki tim dengan 3 anggota (termasuk kamu), berasal dari fakultas yang sama, tetapi boleh dari jurusan dan angkatan berbeda.</li>
                    <li class="fs-18 text-white">Berkomitmen untuk belajar, berbagi ilmu, dan bersenang-senang sambil memberikan dampak positif selama masa program 🚀</li>
                </ol>
            </p>
            <button class="ms-3 px-3 py-2 text-red bg-yellow rounded-pill border border-0 mt-auto fs-16 fw-500 mb-5" style="width:max-content">Daftar Sekarang</button>
        </div>
    </div>
</div>


			</div>
		</div>
		<div class="col order-3 order-md-3 pr-0 dotblue-3">
		    <img src="assets/dotblue-3.png" class="w-100">
		</div>
	</div>
</section>
<!-- END PERSYARATAN -->


<!-- PETA -->
<section id="sec-peta">
	<div class="container-fluid p-0 position-relative">
		<div class="container pt-5 mt-5">
			<div class="row">
				<div class="col-md-12 mb-5">
					<h1 class="text-center">
						<span class="fw-300 text-dark fs-48">Peta</span> <br/> <span class="fs-48 fw-500 text-dark">Partisipan</span>
					</h1>
					<div class="short-border-yellow-center "></div>
				</div>
				<div class="col-md-12 position-relative">
					<img src="assets/peta.png" class="w-100">
				</div>

			</div>
		</div>
	</div>
</section>
<!-- PETA -->


<!-- ASAH DIGITAL -->
<section id="sec-asah-digital">
	<div class="container mt-custom">
	  <div class="row position-relative" >
	    
	    <div class="col-md-6 order-1 order-md-1 mt-5 mt-md-5 px-3 d-flex flex-column justify-content-center">
		    <h1 class=""><span class="fs-48 fw-300">Tentang</span> <br/> <span class="fs-48 fw-500 text-blue">Asah Digital</span></h1>
		    <div class="short-border-red mb-5"></div>
		    <p class="fs-24 fw-300">
		        Asah Digital adalah program dari Meta, yang menaungi Facebook, Messenger, Instagram, dan Whatsapp, yang bertujuan untuk menciptakan lingkungan internet yang aman dan nyaman.
		    </p>
		    <p class="fs-24 fw-300">
		        Program ini membagikan berbagai sumber daya untuk membangun komunitas global warga digital yang bertanggung jawab dan memiliki bekal keterampilan dalam dunia digital.
		    </p>
		</div>

	    <div class="col-md-6  order-3 order-md-3 mt-3 mt-md-5 px-3">
	    	<img src="assets/asah-digital.png" style="width: 100%; max-width: 100%; height: auto; cursor: pointer; display: block; object-fit: contain;">
	    </div>
	  </div>
	</div>
</section>
<!-- END ASAH DIGITAL -->

<!-- TOPIK -->
<div class="container mt-custom">
	<div class="row">
		<div class="col-12">
			<h4 class="fw-500 fs-28 text-center">Topik Utama Dalam Program</h4>
		</div>
		<div class="col-md-6 mt-3">
			<div class="col-12 bg-yellow p-4 rounded-4 position-relative atopikbox">
				
				<div class="row">
					<div class="col-9">
						<p class="fw-700 fs-20 text-red">MEMAJUKAN DEMOKRASI DIGITAL</p>
					</div>
					<div class="col-3 position-relative">
						<img src="assets/cht-1.png" class="cht-img">
					</div>
				</div>
				
				<p class="fw-300 fs-18 text-red">Fokus pada <b class="fw-600 text-red">literasi digital, berpikir kritis</b>, serta menjaga <b class="fw-700 fs-18 text-red">hak asasi manusia</b> dan <b class="fw-700 fs-18 text-red">kebebasan berekspresi</b> di ruang digital. Tujuannya adalah membangun masyarakat digital yang tangguh, inklusif, dan demokratis</p>
			</div>
		</div>
		<div class="col-md-6 mt-3">
			<div class="col-12 bg-yellow p-4 rounded-4 position-relative atopikbox">
				<div class="row">
					<div class="col-9">
						<p class="fw-700 fs-20  text-red">PENGEMBANGAN STRATEGI KAMPANYE</p>
					</div>
					<div class="col-3 position-relative">
						<img src="assets/cht-2.png" class="cht-img">
					</div>
				</div>
				<p class="fw-300 fs-18 text-red">Belajar <b class="fw-700 fs-18 text-red">Komunikasi Strategis</b> dan <b class="fw-600 text-red">Perencanaan Konten</b>, termasuk pembuatan pesan kunci, pemilihan media yang tepat, serta strategi menarik untuk menciptakan kampanye yang relevan dan efektif.</p>
			</div>
		</div>
	</div>
</div>
<!-- END TOPIK -->


<!-- CONTOH KAMPANYE -->
<section id="sec-galeri">
	<div class="container-fluid p-0">
		<div class="container py-5 position-relative mt-custom">
			<div class="row">
				<div class="col-md-12">
					<h1 class="text-center">
						<span class="fw-300 fs-48 text-dark">Contoh</span> <br/> <span class="fs-48 fw-500 text-dark">Kampanye</span>
					</h1>
					<div class="short-border-red-center "></div>
				</div>
				<div class="col-md-4 position-relative imgcontoh mt-3">
					<div class="col-12">
						<a href="https://www.instagram.com/penyelamatdemokrasi/?hl=en" target="_BLANK">
							<img src="assets/cth-1.png" class="w-100">
						</a>
					</div>
				</div>
				<div class="col-md-4 position-relative imgcontoh mt-3">
					<div class="col-12">
						<a href="https://www.instagram.com/lawanpolitikuang_?igsh=cjh5ZThiYjhrcHd6" target="_BLANK">
							<img src="assets/cth-2.png" class="w-100">
						</a>
					</div>
				</div>
				<div class="col-md-4 position-relative imgcontoh mt-3">
					<div class="col-12">
						<a href="ttps://www.instagram.com/colxative?igsh=YjN3dTZhMmI5OG41" target="_BLANK">
							<img src="assets/cth-3.png" class="w-100">
						</a>
					</div>
				</div>
				<div class="col-md-4 position-relative imgcontoh mt-3">
					<div class="col-12">
						<a href="https://www.instagram.com/umalu.journey?igsh=OXZqM2lyMzIxZ294" target="_BLANK">
							<img src="assets/cth-4.png" class="w-100">
						</a>
					</div>
				</div>
				<div class="col-md-4 position-relative imgcontoh mt-3">
					<div class="col-12">
						<a href="https://www.instagram.com/baluttemurun/?hl=en" target="_BLANK">
							<img src="assets/cth-5.png" class="w-100">
						</a>
					</div>
				</div>
				<div class="col-md-4 position-relative imgcontoh mt-3">
					<div class="col-12">
						<a href="https://www.facebook.com/share/r/U1rRVkAmMegDVw2a/?mibextid=WC7FNe">
							<img src="assets/cth-6.png" class="w-100">
						</a>
					</div>
				</div>
				<div class="col-4 back-eclipse-3"></div>

			</div>
		</div>
	</div>
</section>
<!-- END CONTOH KAMPANYE -->


<!-- FAQ -->
<section id="sec-faq">
	<div class="container-fluid p-0">
		<div class="container py-5 position-relative mt-5">
			<div class="row">
				<div class="col-md-12">
					<h1 class="text-center">
						<span class="fw-300 fs-48 text-dark">Pertanyaan Yang</span> <br/> <span class="fs-48 fw-500 text-dark">Sering Ditanyakan (FAQ)</span>
					</h1>
					<div class="short-border-blue-center "></div>
				</div>
				<div class="col-12">
					<div class="accordion" id="accordionExample">
					  <div class="accordion-item">
					    <h2 class="accordion-header" style="border:none">
					      <button class="accordion-button fs-20 fw-600 text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
					        Persyaratan dan Pendaftaran
					      </button>
					    </h2>
					    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
					      <div class="accordion-body fs-18">
					        <b class="fw-600">This is the first item's accordion body.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					      </div>
					    </div>
					  </div>
					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button fs-20 fw-600 collapsed text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
					        Periode Program
					      </button>
					    </h2>
					    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
					      <div class="accordion-body">
					        <strong>This is the second item's accordion body.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					      </div>
					    </div>
					  </div>
					</div>
				</div>

			</div>
		</div>
	</div>
</section>
<!-- END CONTOH KAMPANYE -->


<div class="container-fluid mt-5" style="background: #1F366C;">
	<div class="container pt-5 pb-4">
	  <div class="row text-center text-md-start">
	    <div class="col-md-3 position-relative mb-4 mb-md-0">
	      <img src="assets/saringdaring-white.png" class="w-50 mx-auto d-block d-md-inline">
	      <p class="text-white fw-400 fs-15 mt-4">
	        Saring Daring University Challenge Indonesia adalah program edukasi peningkatan kapasitas sekaligus kompetisi nasional buat mahasiswa.
	      </p>
	    </div>
	    <div class="col-md-6">
	      <div class="col-md-12 mt-3 mb-3">
	        <p class="text-white fs-15 fw-400 mb-2">
	          Dipersembahkan Oleh:
	        </p>
	        <div class="d-flex justify-content-center justify-content-md-start gap-3">
	          <a href="https://www.usaid.gov/id/indonesia" target="_BLANK">
	            <img class="imgper" src="assets/usaid.png">
	          </a>
	          <a href="https://indonesia.fb.com/inisiatif-melek-digital/" target="_BLANK">
	            <img class="imgper" src="assets/meta_asah-logofooter.png">
	          </a>
	        </div>
	      </div>
	      <div class="col-md-12 mt-3 mb-3">
	        <p class="text-white fs-15 fw-400 mb-2">
	          Didukung Oleh:
	        </p>
	        <div class="d-flex justify-content-center justify-content-md-start">
	          <a href="https://www.lovefrankie.co/" target="_BLANK">
	            <img class="imgduk" src="assets/lovefrankie-logo.png">
	          </a>
	        </div>
	      </div>
	    </div>
	    <div class="col-md-3 text-center text-md-start">
	      <button class="px-3 py-2 text-white bg-red rounded-pill border border-0 mt-auto mb-3" style="width:max-content">
	        Daftar Sekarang
	      </button>
	      <div class="col-md-12 mt-5 mb-3">
	        <p class="text-white mb-2 fs-15 fw-400">
	          Social Media Kami:
	        </p>
	        <div class="socmed-container d-flex justify-content-center justify-content-md-start gap-3">
	          <a href="mailto:saringdaring@lovefrankie.co" target="_BLANK">
	            <img class="socmed" src="assets/tl.png" alt="Email">
	          </a>
	          <a href="https://www.facebook.com/profile.php?id=100089241793349" target="_BLANK">
	            <img class="socmed" src="assets/fb.png" alt="Facebook">
	          </a>
	          <a href="https://www.instagram.com/saringdaring/" target="_BLANK">
	            <img class="socmed" src="assets/ig.png" alt="Instagram">
	          </a>
	        </div>
	      </div>
	    </div>
	    <div class="col-12 mt-5">
	      <p class="fs-14 text-white text-center">© 2025 Saring Daring. All rights reserved.</p>
	    </div>
	  </div>
	</div>

</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

<script>
  function playVideo() {
  	$("#youtube-video").height($(".youtube-vid").height());
    // Hide the image
    document.querySelector('.youtube-vid').style.display = 'none';
    // Set the iframe's src with autoplay enabled
    const iframe = document.getElementById('youtube-video');
    iframe.src = "https://www.youtube.com/embed/oYsxBjWhfEA?autoplay=1&rel=0";
    // Show the YouTube video
    iframe.style.display = 'block';
  }

  function playVideo2() {
  	$("#youtube-video2").height($(".youtube-vid2").height());
    // Hide the image
    document.querySelector('.youtube-vid2').style.display = 'none';
    // Set the iframe's src with autoplay enabled
    const iframe = document.getElementById('youtube-video2');
    iframe.src = "https://www.youtube.com/embed/6xS_XRCKPhs?autoplay=1&rel=0";
    // Show the YouTube video
    iframe.style.display = 'block';
  }
   const navLinks = document.querySelectorAll('.nav-link');
	const sections = document.querySelectorAll('section');

	// Add scroll event listener
	window.addEventListener('scroll', () => {
	  let currentSection = '';
	  
	  sections.forEach(section => {
	    const sectionTop = section.offsetTop;
	    const sectionHeight = section.offsetHeight;
	    if (scrollY >= sectionTop - sectionHeight / 3) {
	      currentSection = section.getAttribute('id');
	    }
	  });

	  // Remove active class from all links and add to the current one
	  navLinks.forEach(link => {
	    link.classList.remove('active');
	    if (link.getAttribute('href').substring(1) === currentSection) {
	      link.classList.add('active');
	    }
	  });
	});

	// Add click event listener for smooth scrolling and active state
	navLinks.forEach(link => {
	  link.addEventListener('click', function (e) {
	    e.preventDefault();
	    const targetId = this.getAttribute('href').substring(1);
	    const targetElement = document.getElementById(targetId);
	    targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });

	    // Update active class on click
	    navLinks.forEach(link => link.classList.remove('active'));
	    this.classList.add('active');
	  });
	});


</script>
</body>
</html>
