/* 

Project: fanworld.id
Objective: To create information about Fanworld Indonesia's services


*/


/*-------------------------------------------------------------------
SETTING DASAR: SELURUH TAMPILAN WEBSITE
---------------------------------------------------------------------*/


body {
	background: #222; /* Tampilan Warna Background Diseragamkan */
	padding: 0; /* Padding Diseragamkan Ke-0 */
	margin: 0; /* Margin Diseragamkan Ke-0 */
	font-family: 'Open Sans', sans-serif; /* Jenis Font Disamakan */
}



/*-------------------------------------------------------------------
1. TEMPLATE SETTING FOR HEADER, BANNER PAGE, MAIN PAGE, FOOTER
---------------------------------------------------------------------*/


header {
	background: #222222;
	color: white;
	font-family: 'Montserrat', sans-serif;
	padding: 0 5vw;
	height: fit-content;

	/* Flex untuk menampilkan logo dan menu di masing-masing kanan dan kiri */
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.logo {
	width: 10vw;
}

.banner {
	padding: 0;
	margin: 0;
	min-height: 30vw;
	background-image: url(../images/banner.png);
	display: flex;
	align-items: center;

	/* Menampilkan Gambar Penuh di Layar */
	background-size: cover;
	background-position: right;
	background-attachment: unset;
	
	/* "Browser Prefixes", Dipakai untuk Menampilkan Teknik CSS3 ke Beragam Browser Berbeda*/
	-webkit-background-size: cover; /*-webkit-, prefix untuk Andoid, iOS, Chrome, Safari*/
	-moz-background-size: cover; /*-moz-, mozila */
	-o-background-size: cover; /* -o-, opera*/
	-ms-background-size: cover; /* -ms-, internet explorer*/
}

main {
	background-color: #222;
	color: white;
	padding: 1.2vw 5vw;
	height: fit-content;
}

footer {
	background: #222;
	color: #E5E6E4;
	padding: 1.2vw 5vw;
	height: fit-content;
}


/*-------------------------------------------------------------------
2. GENERAL SETTING FOR TEXT ROLES
---------------------------------------------------------------------*/
 

/* Menyamakan Semua Margin Text Ke-0. 
Untuk Memudahkan Penyesuaian Untuk Kostumisasi Kedepannya */

p, h1, h2 {
	margin: 0;
}

/* Logo */



/* Judul, Headline, Text Terbesar dalam Satu Halaman */
h1 {
	font-size: 2.2vw;
	font-weight: 600;
}

h1.headline {
	font-size: 3.5vw;
	line-height: 100%;
	margin-bottom: 3vw;
}

/* Sub-Judul */
h2 {
	font-size: 1.4vw;
	font-weight: 400;
}

/* Text Biasa atau Paragraf*/
p {
	font-size: 1vw;
	font-weight: 300;
}

/* Link */
a {
	font-family: 'Open Sans', sans-serif;
	font-size: 1vw;
	font-weight: 300;
}

/* Button */
button {
	font-size: 1.1vw;
}



/*-------------------------------------------------------------------
3. SPECIFIC CUSTOMISATION
---------------------------------------------------------------------*/



/* --- HEADER --- */

.topnav, .dropdown-mobile {
	display: none;
}

/* .menu */	

.menu {
	display: flex;
}

/* .dropdown */

.dropdown {
	width: 10vw;
}

/* .dropdown-button ==>> 	untuk tombol menu nya saja, tidak termasuk dropdown-content nya*/

.dropdown-button {
	background-color: #222;
	color: white;
	border: none;
	height: 5vw;
}

/* .dropdown-content ==>> 	mencakup SEMUA KONTEN dari setiap tombol menu-nya yang muncul saat dihoover atau diklik.*/

.dropdown-content {
	/* Diatur sembunyi saat tidak dihoover atau diklik*/
	display: none;
	position: absolute;
}

/* .dropdown-content a  */

.dropdown-content a {
	color: white;
	text-decoration: none;
	padding: 0.7vw;
}

.dropdown-button a {
	color: white;
	text-decoration: none;
	font-weight: 400;
}

/* --- Pengaturan Saat Di-Hoover --- */


/*    Diatur berdasarkan order of accurance    */


/* Mengubah warna text .dropdown-button saat semua bagian di SATU UNIT .dropdown-nya di-hoover. */
.dropdown:hover .dropdown-button {color: #999;}

/* Memunculkan SATU UNIT .dropdown-content, saat .dropdown nya di hoover */
.dropdown:hover .dropdown-content {
	display: flex;
	flex-direction: column;
	background-color: #222;
	min-width: 10vw;
}

/* Mengubah warna text (link) di bagian dropdown-content, saat text (link) nya di hoover */
.dropdown-content a:hover {color: #fff;}

.dropdown:hover .dropdown-button a {color: #fff;}



/* --- BANNER --- */



.banner-text {
	padding-left: 5vw;
	color: #fff;
	line-height: 250%;
}

.sub-headline {
	line-height: 300%;
}

span {
	background-color: #fff;
	color: #222;
}

/* --- Tombol di Banner nya --- */

.banner button {
	padding: 1.1vw 2vw;
	border-width: 0;
	border-radius: 30vw;
	margin-right: 1.1vw;
}

.banner-text a {
	color: #222;
	font-weight: 500;
	text-decoration: none;
}

.button-tokopedia {
	background-color: #34AD37;
}

.button-tokopedia a {
	color: #222;
}

.button-whatsapp {
	background-color: #f7c808;
}



/* --- MAIN-- */


/* .Layanan  ==>>  melingkari masing-masing jenis layanan: mencakup headline, subheadline, dan text  */

.layanan {
	min-height: 20vw;
	text-align: center;
	padding: 4vw 0 1.2vw 0;
}

/* tambahan setting khusus untuk <h2> yang ada di .layanan */
.layanan h2 {
	padding-top: 0.9vw;
}

/* .Grup  ==>>  Melingkari SEMUA text dalam satu Jenis Layanan. Tidak termasuk Headline dan Sub-Headline*/

.grup {
	padding: 8VW;
	padding-top: 4vw;

	/* Flex, menampilkan konten di dalam "Class: Grup" di tengah secara vertikal dan horizontal*/
	display: flex;
	justify-content: space-evenly; /* horizontal dengan jarak yang sama antar dua atau lebih elemen */
	align-content: center; /* vertikal, bisa pakai align-item tapi nanti tinggi kotak tidak sama */
}

/* .Grup-Text  ==>>  Melingkari SATU text */

.grup-text {
	/* flex baru (meskipun di box:.Grup sudah ada flex) 
	agar text bisa diatur ke tengah*/
	display: flex;
	justify-content: center;
	align-items: center;

	/* membuat ukuran box sama lebar dan tinggi */
	flex-basis: 25%;
	min-height: 8vw;

	/* pengaturan border*/
	border-style: solid;
	border-width: 0.2vw;
	border-radius: 0.7vw;
}

a.grup-text {
	color: #E5E6E4;
	text-decoration: none;
}

.grup-text:hover {
	background-color: #E5E6E4;
	color: #222;
} 

/* 
.konten 
*/

.main-konten {
	color: #fff;
	background-color: #222;
	display: block;
	text-align: center;
}

#brand, #crowdfund {
	padding-bottom: 5vw;
}

.main-konten h1 {
	padding-top: 5vw;
	padding-bottom: 2vw;
}

.konten {
	
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	padding: 2vw 15vw;
}

.konten-one img {
	width: 10vw;
	height: 10vw;
	border-radius: 50%;
	overflow: hidden;
	object-fit: cover;
	object-position: 20% 30%;
	margin: 2vw 2vw;
}

.konten-one p {
	text-align: center;
}

.konten-one a {
	text-decoration: none;
	font-weight: 400;
	color: #222;
}

p.more {
	font-weight: 500;
	padding-top: 4vw;
	padding-bottom: 2vw;
}

/* Button .pesan-sekarang */

.pesan-sekarang {
	background-color: #f7c808;
	padding: 1.1vw 2vw;
	border-width: 0;
	border-radius: 30vw;
	margin-right: 1.1vw;
}
	
.pesan-sekarang a {
	color: #222;
	font-weight: 600;
	text-decoration: none;
}

.pesan-sekarang:hover a {
	color: #444;
}

.tokopedia {
	background-color: #34AD37;
}

.tokopedia a {
	color: #222;
}

.tokopedia:hover a {
	color: #E5E6E4;
}


/* .Text  ==>>  Pengaturan Text itu sendiri */

.text {
	font-size: 1.3vw;
	font-weight: 600;
}


/* --- FOOTER --- */

/*.info */
.info {
	display: flex;
	justify-content: space-between;
	padding-top: 2vw;
}

.info h1 {
	font-size: 1vw;
	padding-bottom: 1.7vw;
}

/*Link di bagian info */
.info a {
	color: #E5E6E4;
	text-decoration: none;
	padding-bottom: 0.7vw;
}

.info a:hover {
	text-decoration: underline;
}

/*.side ==>> pembagian .info menjadi 4 bagian dengan topik masing-masing*/
.side {
	display: flex;
	flex-direction: column;
}

/*copyright*/
.copyright {
	padding-top: 3vw;
	text-align: center;
	font-weight: 400;
}

/* --- MEDIA QUERY FOR FONTS MAX 1024 --- */

@media screen and (max-width: 1023px) {

	/* ------------------------
	GENERAL SETTING: TEXT SIZES
	--------------------------- */

	h1 {
		font-size: 2.3vw;
	}

	h2 {
		font-size: 1.9vw;
	}

	p, a, li, h3, .info h1 {
		font-size: 1.5vw;
	}

	p.copyright {
		font-size: 1.3vw;
	}

	.text {
		font-size: 1.7vw;
		font-weight: 500;
	}

	/* -------------------------------------------------------- 
	HEADER: 
	----------------------------------------------------------- */


	/* --- Sembunyikan .menu dan .div-logo, munculkan .topnav --- */

	.logo, .menu {
		display: none;
		position: absolute;
	}

	.topnav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	/* --- .logo-mobile --- */

	.logo-mobile {
		display: flex;
		padding: 1.5vw 0;
		position: relative;
	} --- */


	.logo-mobile p {
		align-self: center;
	}

	.logo-bulat {
		width: 5vw;
		padding-right: 1vw;
	}

	/* --- .menu-humberger --- */

	.menu-humberger {
		display: block;
		text-align: end;
	}

	.menu-humberger a {
		color: #E5E6E4;
	}



	/* --- .dropdown-mobile --- */

	.dropdown-mobile {
		display: none;
		position: relative;
		width: 100%;
		padding-top: 0;
	}
	
	.dropdown-mobile a {
		display: block;
		text-align: end;
		padding: 1vw 0;
		color: #E5E6E4;
		text-decoration: none;
	}

	.topnav a:hover, .dropdown-mobile a:hover {
		color: #999;
	}

	/* --- .mini-dropdown --- */

	#mini-content, #minidua-content, #minitiga-content {
		display: none;
	}

	#mini-content a, #minidua-content a, #minitiga-content a {
		padding-right: 1.7vw;
	}
	
	/* -------------------------------------------------------- 
	BANNER
	----------------------------------------------------------- */

	.banner {
		padding: 3vw 0;
	}

	.sub-headline {
		line-height: 300%;
	}

	/* --- Tombol di Banner nya --- */

	.banner button {
		display: block;
		margin-bottom: 1.3vw;
	}

	.button-tokopedia {
		margin-top: 2vw;
	}


	/* -------------------------------------------------------- 
	MAIN: 
	----------------------------------------------------------- */


	.layanan {
		padding-bottom: 0;
	}
	.grup {
		display: block;
		text-align: center;
	}

	.grup-text {
		margin: 0 15vw 2vw 15vw;
	}
	
	.grup-pesan {
		margin: 0 25.5vw 0 25.5vw;
	}
	
	.top {
		margin-bottom: 5vw;
	}

}

@media screen and (max-width: 890px) {

	/* ------------------------
	GENERAL SETTING: TEXT SIZES
	--------------------------- */

	h1 {
		font-size: 2.8vw;
	}

	h1.headline {
		line-height: 4vw;
	}

	h2 {
		font-size: 2vw;
	}

	p, a, li, h3, .info h1 {
		font-size: 1.5vw;
	}

	p.copyright {
		font-size: 1.3vw;
	}

	.text {
		font-size: 1.8vw;
		font-weight: 600;
	}

	/* -------------------------------------------------------- 
	BANNER
	----------------------------------------------------------- */

	.banner {
		padding: 5vw 0;
	}

	/* --- Bagian Pesan Sekarang --- */

	main.pesan {
		padding-top: 22px;
		padding-bottom: 22px;
	}

	.pesan .layanan {
		padding: 0;
	}

	/*------------------------------------------------------------
	MAIN
	--------------------------------------------------------------*/

	.konten {
		padding: 2vw 20vw;
	}
	
	.konten-one img {
		width: 16vw;
		height: 16vw;
	}
	
}

/* --- MEDIA QUERY FOR FONTS MAX 414 --- */

@media screen and (max-width: 414px) {

	/* -------------------------------------------------------- 
	GENERAL FONT-SETTING
	----------------------------------------------------------- */

	h1 {
		font-size: 23px;
		line-height: normal;
	}

	h2 {
		font-size: 16px;
	}

	p, a, li, h3, .info h1 {
		font-size: 15px;
	}

	/* -------------------------------------------------------- 
	HEADER
	----------------------------------------------------------- */

	header {
		padding: 1.2vw 10vw;
	}

	.logo-bulat {
		width: 10vw;
		padding-right: 2vw;
	}

	.dropdown-mobile {
		padding-bottom: 2vw;
	}
	
	.dropdown-mobile a {
		padding: 3vw 0;
		font-weight: 400;
	}

	/* -------------------------------------------------------- 
	BANNER
	----------------------------------------------------------- */

	.banner {
		background-image: url(../images/banner.jpg);
		min-height: 480px;
		background-position: center;
		padding: 10vw 4vw 4vw 4vw;

		/* --- text di dalam Banner--- */
		align-items: flex-start;
		text-align: center;
	}

	h1.headline {
		font-size: 25px;
		line-height: 37px;
	}

	h2.sub-headline {
		font-size: 16px;
	}

	/* --- Tombol di Banner nya --- */

	.banner button {
		padding: 12px 20px;
		margin-bottom: 11px;
		margin-right: 0;
		display: inline;
		text-align: center;
	}

	.banner-text a {
		font-size: 18px;
	}

	.button-tokopedia {
		margin-top: 40px;
	}

	/* ---------------------------------------------------------
	MAIN
	------------------------------------------------------------ */

	main {
		padding: 8vw 8vw;
	}

	.layanan h2 {
		padding-bottom: 20px;
	}

	.grup-text {
		min-height: 18vw;
		margin-top: 10px;
		
	
		/* pengaturan border*/
		border-width: 0.6vw;
		border-radius: 1.7vw;
	}

	.bottom {
		margin-top: 20px;
	}

	.text {
		font-size: 15px;
		font-weight: 600;
	}

	/* --- Bagian Pesan Sekarang --- */


	.top {
		padding-bottom: 30px;
	}
	
	.grup-pesan object {
		width: 18vw;
		padding-bottom: 10px;
	}

	/* --- .konten--- */

	.konten-one {
		padding: 15px 0;
	}
	
	.konten-one img {
		width: 150px;
		height: 150px;
		padding-bottom: 5px;
	}

	/* --- tombol .pesan-sekarang--- */

	.pesan-sekarang {
		padding: 12px 20px;
		margin-top: 40px;
		margin-bottom: 30px;
		margin-right: 0;
		display: inline;
		text-align: center;
	}

	.pesan-sekarang a {
		font-size: 18px;
	}

	/* --- Footer --- */

	.info {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.side {
		margin-bottom: 12px;
	}

	.info h1 {
		padding-bottom: 1px;
	}

	.info a {
		padding-bottom: 1.5px;
	}

	p.copyright {
		font-size: 12px;
	}
}