body,
html {
height: 100%;
font-family: "Times New Roman", Times, serif;
}

.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}

.fa-eye,
.fa-bullseye {
color: #f32d44;
}

hr.hr-one {
width: 100px;
border: 3px solid #ffee0b;
border-radius: 5px;
opacity: 100%;
}

.text {
color: #ffee0b;
}
.text-light {
color: white;
}

.navbar a {
color: black;
font-weight: 600;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
sans-serif;
font-size: 18px;
}

.navbar a:hover {
color: #000000;
}

.navbar img {
max-width: 180px;
}

.nav-link:hover {
border-bottom: solid 2px #f32d44;
}

.nav-link {
margin-right: 50px;
}
/* .nav-link:hover{
border-bottom: solid #f32d44 5px;
} */

.fa-fingerprint {
font-size: 42px;
color: #f32d44;
}

.parallax {
/* The image used */
/*background-image: url("../images/background-1.jpg");*/
background-image: url("../images/background-5.jpg");

/* Full height */
/* height: 100%; */

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.container-satu {
/* min-height: 1000px; */
background-color: rgb(255, 255, 255);
}

.about {
color: white;
padding: 50px;
}

.visi-misi {
/* height: 300px; */
padding: 50px;
color: rgb(0, 0, 0);
}
.visi {
width: 450px;
margin: auto;
}
.misi {
width: 450px;
margin: auto;
}

.kenapa {
/* height: 700px; */
/*background-image: url("../images/background-1.jpg");*/
background-image: url("../images/background-5.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 50px;
color: rgb(255, 255, 255);
}
.kenapa-col {
padding: 100px;
}

.dream {
height: 700px;
background-image: url("../images/background-4.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 50px;
color: rgb(255, 255, 255);
}
.dream .row {
margin: auto;
}
.dream-col {
width: 720px;
margin: auto;
text-align: center;
}

.brand {
/* height: 320px; */
background-color: rgb(0, 0, 0);
color: white;
}
.brand img {
width: 360px;
}

footer {
background-color: white;
color: black;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}

@media only screen and (max-width: 720px) {
.about h5 {
font-size: 14px;
}
.visi-misi {
height: 300px;
padding: 10px;
}
.visi-misi h1 {
font-size: 18px;
}
.visi-misi p {
font-size: 12px;
}
.kenapa img {
width: 240px;
}
.kenapa-col h1 {
font-size: 18px;
}
.kenapa-col p {
font-size: 14px;
}
.kenapa-col {
padding: 0px;
}
.dream-col {
width: auto;
}
.dream-col p {
text-align: left;
}
.brand img {
width: 140px;
}
}

/* product style */

.products .card {
margin: 5px;
}

@media only screen and (max-width: 720px) {
.products .card {
margin: 25px;
}
}

/* end product style */

/* contact style */
.contact {
height: 100vh;
}
.contact .icon {
margin-top: 250px;
}
.contact p {
font-size: 20px;
}
.contact .fa-solid {
color: #f32d44;
font-size: 56px;
}
.contact .fa-brands {
color: #f32d44;
font-size: 56px;
}
.icon span {
font-size: 24px;
padding: 5px;
font-weight: 700;
}
.icon p {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
}
/* end contact style */
.page-link {
color: #000;
}
.page-item.active .page-link {
background-color: #ffee2e;
color: #000;
border-color: #ffee2e;
}
.btn-warning {
color: #000;
background-color: #ffee2e;
border-color: #ffee2e;
}
.navbar a {
color: rgba(0,0,0,.7);
}
.page-link:hover {
color: #000;
}

.whatsapp-icon {
width: 58px;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
z-index: 9999999;
position: fixed;
bottom: 30px;
right: 30px;
transition: 2s;
}
.dropdown-item.active, .dropdown-item:active {
color: rgba(0,0,0,.7);
text-decoration: none;
background-color: #ffee2e;
}

.btn-flat {
border-radius: 0;
}

.focus-secondary:focus {
outline: none;
box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25);
}

.btn-tokopedia:focus {
box-shadow: 0 0 0 0.25rem rgba(3, 172, 14, .25);
}

.btn-lazada:focus {
box-shadow: 0 0 0 0.25rem linear-gradient(180deg, rgba(27,93,223,1) 0%, rgba(29,34,130,1) 100%);
}

.btn-shopee:focus {
box-shadow: 0 0 0 0.25rem rgba(255, 87, 34, .25);
}

.btn-social {
    font-size: 1.5rem;
}
.btn-social:hover {
opacity: 0.8;
}

.dropdown-menu.show {
    max-height: 400px;
    overflow-x: auto;
}