/* ===== body ===== */
html,
body {
  height: 100%;
}

body {
  font-family: Lato, sans-serif;
  color: #777;
  line-height: 1.8;
}

/* ===== Navbar ===== */
nav div a:hover {
  background-color: #ccc;
}

nav div a#search,
nav div a#list {
  color: #000;
}

nav div a#search:hover {
  color: #fff;
  background-color: #ff0000;
}

nav div a#list:hover {
  color: #fff;
  background-color: #000;
}

.card-costum {
  background-color: #fff;
  box-shadow: 1px 1px 5px #888;
}

.animate-top {
  animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ===== Create a Parallax Effect ===== */
.bg-img1,
.bg-img2,
.bg-img3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ===== First image (Logo. Full height) ===== */
.bg-img1 {
  background-image: url("../img/gambar-home.jpg");
  /* height: 100vh; */
  min-height: 400px;
}

/* ===== Second image (Portfolio) ===== */
.bg-img2 {
  background-image: url("../img/gambar-portfolio.jpg");
  min-height: 400px;
}

/* Third image (Contact) */
.bg-img3 {
  background-image: url("../img/gambar-contact.jpg");
  min-height: 400px;
}

/* ===== animasi fade-in (opacity) ===== */
.fade-opacity {
  animation: fadeIn 1.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* =====  Turn off parallax scrolling for tablets and phones ===== */
/* 
@media only screen and (max-width: 1600px) {
  .bg-img1, .bg-img2, .bg-img3 {
    background-attachment: scroll;
    min-height: 400px;
  }
}
*/


/* ===== Home ===== */
.letter-wide {
  letter-spacing: 4px;
}

.white-space {
  white-space: nowrap;
}

/* ===== About ===== */
#about,
#portfolio,
#contact {
  max-width: 980px;
}

.padding-custom {
  padding-top: 4.5rem;
  padding-bottom: 4rem;
}

.opacity-hover {
  opacity: 0.75;
  transition: opacity 0.5s ease;
}

.opacity-hover:hover {
  opacity: 1;
}

/* ===== Portfolio ===== */

.opacity-portfolio:hover {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

/* ===== Modal ===== */
i.bi-x-lg {
  display: inline-block;
  padding: 2px 10px;
  color: #fff;
}

i.bi-x-lg:hover {
  background-color: #d9c3c3;
  color: #000;
}

.animate-zoom {
  animation: zoomIn 0.6s ease;
}

@keyframes zoomIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.padding-modal {
  padding: 4rem 0;
}

/* ===== contact ===== */
.contact-hover:hover {
  color: #000;
}

.bg-button {
  background-color: #000;
  color: #fff;
}

button:hover {
  background-color: #b4b4b4;
  color: #000;
}

/* ===== Footer ===== */
footer {
  background-color: #000;
  opacity: 0.5;
}
footer:hover {
  opacity: 100%;
}

footer a {
  background-color: #fff;
  color: #000;
}

footer a:hover {
  background-color: #bcbaba;
}

footer div i {
  color: #fff;
}

footer div i:hover {
  color: #bcbaba;
  cursor: pointer;
}

footer p a {
  background-color: #000;
  color: #fff;
}

footer p a:hover {
  color: #0000ff;
  background-color: #000;
}