:root {
    --primary-color: #00923F;     /* Hijau utama (logo dan elemen utama) */
    --secondary-color: #01863a;     /* Hijau utama (logo dan elemen utama) */
    --accent-color: #F4F4F4;      /* Abu terang (latar belakang sekunder) */
    --text-color: #2C2C2C;        /* Abu gelap (teks utama) */
    --hover-color: #007A33;       /* Hijau lebih gelap untuk efek hover */
}
  

.panel-track .panel-body {
    background-color: var(--primary-color) !important;
}
#footer-home {
    background-color: var(--hover-color) !important;
}



.navbar-nav .btn-login {
    display: flex;
    align-items: center; /* vertikal tengah */
    margin-left: 10px;
    margin-top: 6.5px;
}

.navbar-nav .btn-login a {
    background-color: var(--accent-color) !important;
    color: #000 !important;
    font-weight: bold;
    padding: 6px 12px !important;
    border-radius: 5px;
    border: 3px solid var(--secondary-color);
    transition: all 0.3s ease-in-out;
}
.navbar-nav .btn-login a:hover {
    background-color: var(--hover-color) !important;
    color: #fff !important;
    border: 3px solid var(--accent-color);
}


body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
}

.navbar-inverse {
    background-color: var(--primary-color);
    border-color: var(--hover-color);
}

.navbar-inverse .navbar-toggle {
    border-color: #fff;
}

.navbar-inverse .navbar-brand {
    color: #fff;
}

.navbar-brand {
    float: left;
    font-size: 20px;
    height: 60px;
    line-height: 30px;
    padding: 15px;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
    background-color: var(--hover-color) !important;
    color: #fff;
}

.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
    background-color: var(--primary-color) !important;
    color: #fff;
}

.navbar-inverse .navbar-nav > li > a {
    color: #fff;
}

.navbar-inverse .navbar-nav > li > a:hover {
    color: #fff;
    background: var(--secondary-color) !important;
}


.navbar-nav > li > a {
    padding-bottom: 15px;
    padding-top: 15px;
    line-height: 30px;
    font-size: 15px;
}

header.carousel {
    height: 70%;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.daftar i {
    font-size: 70px;
    color: #3c8dbc;
    border: 1px solid #3c8dbc;
    border-radius: 50%;
    padding: 25px 35px 25px 35px;
}

.pesan i {
    font-size: 70px;
    color: #3c8dbc;
    border: 1px solid #3c8dbc;
    border-radius: 50%;
    padding: 25px 32px 25px 32px;
}

.bayar i {
    font-size: 70px;
    color: #3c8dbc;
    border: 1px solid #3c8dbc;
    border-radius: 50%;
    padding: 25px 40px 25px 40px;
}

footer {
    background: #34495e none repeat scroll 0 0;
    padding: 25px 0 15px 0;
    width: 100%;
    position: absolute;
    text-align: center;
	color: #fff;
}

footer a {
	color: #fff;
}

footer a:hover {
	color: #3c8dbc;
	text-decoration: none;
}