/*
foother
*/

/* Prevent textarea from resizing */
textarea {
  resize: none;
}

/* Center text in any container */
.text {
  color: white;
  font-size: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* For IE */
  white-space: nowrap;
}

/* Remove duplicate charset declaration */

/* Fix icon alignment */
.svg-inline--fa {
  vertical-align: -0.2em;
}

/* Center the rounded social buttons container */
.rounded-social-buttons {
  text-align: center;
  padding: 20px 10px;
}

/* Style the social button */
.rounded-social-buttons .social-button {
  display: inline-block;
  cursor: pointer;
  width: 3.125rem;
  height: 3.125rem;
  border: 0.125rem solid transparent;
  padding: 0;
  text-decoration: none;
  text-align: center;
  color: #fefefe;
  font-size: 1.5625rem;
  font-weight: normal;
  line-height: 2em;
  border-radius: 1.6875rem;
  transition: all 0.5s ease;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
}

/* Rotate button on hover or focus */
.rounded-social-buttons .social-button:hover,
.rounded-social-buttons .social-button:focus {
  transform: rotate(360deg);
}

/* Style the social media icons */
.rounded-social-buttons .fa-twitter,
.rounded-social-buttons .fa-facebook-f,
.rounded-social-buttons .fa-linkedin,
.rounded-social-buttons .fa-tiktok,
.rounded-social-buttons .fa-youtube,
.rounded-social-buttons .fa-instagram {
  font-size: 25px;
}

/* Specific button styles for each social network */
.rounded-social-buttons .social-button.facebook {
  background: #3b5998;
}

.rounded-social-buttons .social-button.facebook:hover,
.rounded-social-buttons .social-button.facebook:focus {
  color: #3b5998;
  background: #fefefe;
  border-color: #3b5998;
}

.rounded-social-buttons .social-button.twitter {
  background: #55acee;
}

.rounded-social-buttons .social-button.twitter:hover,
.rounded-social-buttons .social-button.twitter:focus {
  color: #55acee;
  background: #fefefe;
  border-color: #55acee;
}

.rounded-social-buttons .social-button.linkedin {
  background: #007bb5;
}

.rounded-social-buttons .social-button.linkedin:hover,
.rounded-social-buttons .social-button.linkedin:focus {
  color: #007bb5;
  background: #fefefe;
  border-color: #007bb5;
}

.rounded-social-buttons .social-button.tiktok {
  background: #000000;
}

.rounded-social-buttons .social-button.tiktok:hover,
.rounded-social-buttons .social-button.tiktok:focus {
  color: #000000;
  background: #fefefe;
  border-color: #000000;
}

.rounded-social-buttons .social-button.youtube {
  background: #bb0000;
}

.rounded-social-buttons .social-button.youtube:hover,
.rounded-social-buttons .social-button.youtube:focus {
  color: #bb0000;
  background: #fefefe;
  border-color: #bb0000;
}

.rounded-social-buttons .social-button.instagram {
  background: #125688;
}

.rounded-social-buttons .social-button.instagram:hover,
.rounded-social-buttons .social-button.instagram:focus {
  color: #125688;
  background: #fefefe;
  border-color: #125688;
}

.image-pilihan {
  display: flex;
  justify-content: center; /* Center images horizontally */
  align-items: center; /* Align images vertically */
  flex-wrap: wrap; /* Allow wrapping of images if they overflow */
  gap: 20px; /* Add space between images */
  padding: 20px; /* Add padding around the container */
}

.image-pilihan img {
  width: 300px;
  height: 200px;
  object-fit: cover; /* Make sure the image is nicely cropped */
  border-radius: 10px; /* Rounded corners */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.image-pilihan img:hover {
  transform: scale(1.05); /* Slightly enlarge on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Enhance shadow on hover */
}

/* Basic footer styling */
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px 0;
  bottom: 0;
  width: 100%;
}

/* Style the footer text */
.footer-content p {
  margin-top: 10px;
  font-size: 16px;
}

.nav-item a:hover{
  color: orange;
}