/* ---------------------------------
1. PRIMARY STYLES
--------------------------------- */

html{ font-size: 100%; height: 100%; width: 100%; overflow-x: hidden; margin: 0px;  padding: 0px; touch-action: manipulation; }


body{ font-size: 16px; font-family: 'Montserrat', sans-serif; width: 100%; height: 100%; margin: 0; font-weight: 400;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-wrap: break-word; overflow-x: hidden; 
	color: #333; }

h1, h2, h3, h4, h5, h6, p, a, ul, span, li, img, inpot, button{ margin: 0; padding: 0; }

h1,h2,h3,h4,h5,h6{ line-height: 1.5; font-weight: inherit; }

h1,h2,h3{ font-family: 'Poppins', sans-serif; }

p{ line-height: 1.6; font-size: 1.05em; font-weight: 400; color: #555; }

h1{ font-size: 3.5em; line-height: 1; }
h2{ font-size: 3em; line-height: 1.1; }
h3{ font-size: 2.5em; }
h4{ font-size: 1.5em; }
h5{ font-size: 1.2em; }
h6{ font-size: .9em; letter-spacing: 1px; }

a, button{ display: inline-block; text-decoration: none; color: inherit; transition: all .3s; line-height: 1; }

a:focus, a:active, a:hover,
button:focus, button:active, button:hover,
a b.light-color:hover{ text-decoration: none; color: #E45F74; }

b{ font-weight: 500; }

img{ width: 100%; }

li{ list-style: none; display: inline-block; }

span{ display: inline-block; }

button{ outline: 0; border: 0; background: none; cursor: pointer; }

b.light-color{ color: #444; }

.icon{ font-size: 1.1em; display: inline-block; line-height: inherit; }

[class^="icon-"]:before, [class*=" icon-"]:before{ line-height: inherit; }

*, *::before, *::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

*, *::before, *::after {
    -webkit-box-sizing: inherit;
	box-sizing: inherit;} 

	
/* ---------------------------------
2. COMMONS FOR PAGE DESIGN
--------------------------------- */

.center-text{ text-align: center; } 

.display-table{ display: table; height: 100%; width: 100%; }

.display-table-cell{ display: table-cell; vertical-align: middle; }



::-webkit-input-placeholder { font-size: .9em; letter-spacing: 1px; }

::-moz-placeholder { font-size: .9em; letter-spacing: 1px; }

:-ms-input-placeholder { font-size: .9em; letter-spacing: 1px; }

:-moz-placeholder { font-size: .9em; letter-spacing: 1px; }


.full-height{ height: 100%; }

.position-static{ position: static; }

.font-white{ color: #fff; }


/* ---------------------------------
3. MAIN SECTION
--------------------------------- */

.main-area{ position: relative; height: 100vh; z-index: 1; padding: 0 20px; background-size: cover; color: #fff; }

.main-area:after{ content:''; position: absolute; top: 0; bottom: 0;left: 0; right: 0; z-index: -1;  
	opacity: .4; background: #000; }

.main-area .desc{ margin: 20px auto; max-width: 500px; }
	
.main-area .notify-btn{ padding: 13px 35px; border-radius: 0px; border: 2px solid #fff;
	color: #fff; background: #063889; }

.main-area .notify-btn:hover{ background: none; }

/* ---------------------------------
    STYLING LOGO
--------------------------------- */
.logo-wrap {
    margin-bottom: 120px;
}

.logo-img {
    width: 100%;
    max-width: 400px; /* Atur ukuran logo */
    height: auto;
    margin: 0 auto 10px; /* Pemusatan dan jarak */
}

.logo-text {
    font-family: 'Poppins', sans-serif;
    font-size: 2.2em;
    letter-spacing: 5px;
    margin-bottom: 0;
}

.logo-subtext {
    font-size: 0.9em;
    font-weight: 300;
    letter-spacing: 3px;
    opacity: 0.8;
    margin-top: -5px; /* Sedikit naik agar dekat dengan logo-text */
}

/* ---------------------------------
    STYLING DESKRIPSI
--------------------------------- */
.main-area .desc{ 
    margin: 30px auto; 
    max-width: 650px; /* Diperluas agar teks deskripsi tidak terlalu sempit */
    line-height: 1.8;
    font-size: 1.1em;
}

/* ---------------------------------
    STYLING BUTTONS (PENTING: Layout dan Style Dua Tombol)
--------------------------------- */
.button-container {
    margin-top: 40px;
    margin-bottom: 180px; /* Jarak dari link "ENTER WEBSITE" */
    display: flex; /* Menggunakan Flexbox untuk tata letak tombol berdampingan */
    justify-content: center;
    gap: 64px; /* Jarak antara dua tombol */
}

.main-btn {
    padding: 18px 32px;
    border-radius: 32px; /* Memberi sudut sedikit melengkung */
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.3s;
}

/* Tombol 1: Kalkulasi Biaya (Solid Blue) */
.solid-btn{ 
	border: 2px solid #063889;
	color: #fff; 
	background: #063889; 
}

.solid-btn:hover{ 
    background: #fff; 
    color: #063889; /* Pastikan teks tetap putih saat hover */
}

/* Tombol 2: Portfolio Kami (Outline White) */
.outline-btn{ 
    border: 2px solid #fff; 
    color: #fff; 
    background: none; 
}

.outline-btn:hover{ 
    background: #fff; /* Latar belakang menjadi putih saat hover */
    color: #063889; /* Teks menjadi biru saat hover */
}

/* ---------------------------------
    STYLING ENTER WEBSITE
--------------------------------- */
.enter-link {
    position: absolute;
    bottom: 80px; /* Posisikan di bawah */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9em;
    letter-spacing: 1px;
    padding: 10px 20px;
}

.enter-link:hover {
    opacity: 0.8;
    color: #063889;
}

/* Hapus .notify-btn yang lama jika sudah tidak digunakan */
.main-area .notify-btn{
    display: none;
}

.whatsapp-float {
	position: fixed;
	width: 56px;
	height: 56px;
	bottom: 24px;
	right: 24px;
	background-color: #25D366;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
	transform: scale(1.08);
	box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

.whatsapp-float img {
	display: block;
}