:root {
  --color-yellow: #fcdc00;
  --color-orange: #ea5a0c;
  --color-dark-blue: #2d4b9b;
  --color-indigo: #4d4596;
  --color-pink: #eb8dba;
  --color-green: #65b97b;
}

.text-custom-blue {
  color: var(--color-dark-blue);
}
.bg-color-yellow {
  background-color: #fcdc00;
}


p {
  font-family: "Gilroy-Bold", sans-serif; /* Using Open Sans font */
  text-align: left; /* Ensure text is aligned to the left */
  font-size: 1.125em;
}

.nav-link {
  text-decoration: none; /* Ini akan menghapus garis bawah dari link secara default */
}
.nav-link:hover {
  border-bottom: 2px solid white; /* Border bottom sebagai ganti underline */
  padding-bottom: 5px; /* Jarak underline dari teks */
  color: #0a90bd; /* Warna biru muda saat hover */
}

.navbar-brand img {
  height: 40px; /* Adjust height as needed */
  width: auto;
  /* Add additional styling as needed */
}

.bg-image {
  background-image: url("../dev/img/fun-agency.png");
  height: 600px;
}

.display-1 {
  font-size: 3.5rem; 
}

.display-3 {
  font-size: 3.5rem; 
  font-family: "Gilroy-Heavy", serif;
}

.lead {
  font-size: 1.2rem;
}

#hero-section {
  background-color: #fcdc00; 
  height: auto; 
  position: relative; 
}

.text-hello-there {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff9f9;
  z-index: 9;
  margin: 0;
  font-family: "Gilroy-Heavy", sans-serif;
  font-size: 7rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 60px;

  opacity: 0;
  animation: fadeUp 2s forwards;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 0); 
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%); 
  }
}

#hero-section img {
  display: block; 
  margin: 0 auto;
  position: relative; 
  z-index: 10; 
  width: 80vw; 
}

.align-bottom {
  justify-content: flex-end;
}

#what-we-believe h2 {
  height: auto; /* Atur tinggi section menjadi otomatis */
  align-self: start;
  font-size: 4vw;
  top: 0vh;
  position: relative;
  font-family: "Gilroy-Heavy", sans-serif;
}

#what-we-believe img {
  height: 100vh; /* Atur sesuai dengan tinggi section */
  width: auto; /* Menjaga rasio aspek gambar */
}
#what-we-believe span {
  color: #e24903; /* Replace with your chosen color */
  font-weight: bold;
}
#our-playground ul {
  font-family: "Gilroy-Bold", sans-serif; /* Menggunakan jenis huruf Gilroy-Bold */
  text-align: left; /* Memastikan teks teralignasi ke kiri */
  list-style: none; /* Menghilangkan gaya bawaan daftar (bullet) */
}

#our-playground h2 {
  font-size: 5rem;
  font-family: "Gilroy-Heavy", serif; /* Menggunakan jenis huruf Gilroy-Bold */
  color: #fcdc00;
}

#our-playground ul li::before {
  content: "•"; /* Simbol bullet yang digunakan */
  color: #4a90e2; /* Warna bullet, ganti dengan warna yang diinginkan */
  margin-right: 8px; /* Jarak antara bullet dan teks daftar */
  font-weight: bold;
}
#our-clients h2 {
  font-size: 5rem;
  font-family: "Gilroy-Heavy", serif; /* Menggunakan jenis huruf Gilroy-Bold */
}

/* Mengatur ukuran semua logo dalam baris menjadi 100% */
.logo-row .clients-logo {
  width: 100%;
  height: auto; /* Ini akan menjaga proporsi aspek gambar */
}


#the-fun-makers h2 {
  font-size: 5rem;
  font-family: "Gilroy-Heavy", sans-serif; /* Menggunakan jenis huruf Gilroy-Bold */
  color: #ea5a0c;
}
#our-values h2 {
  font-size: 5rem;
  font-family: "Gilroy-Heavy", sans-serif; /* Menggunakan jenis huruf Gilroy-Bold */
}
#contact-us h2 {
  font-size: 5rem;
  font-family: "Gilroy-Heavy", sans-serif; /* Menggunakan jenis huruf Gilroy-Bold */
}

#contact-us address {
  font-size: 1rem;
  font-family: "Gilroy-Regular", sans-serif; /* Menggunakan jenis huruf Gilroy-Bold */
  font-weight: bold;
}

.mark-yellow {
  background-color: var(--color-yellow);
}

.mark-orange {
  background-color: var(--color-orange);
}

.mark-dark-blue {
  background-color: var(--color-dark-blue);
}

.mark-indigo {
  background-color: var(--color-indigo);
}

.mark-pink {
  background-color: var(--color-pink);
}

.mark-green {
  background-color: var(--color-green);
}

.clients-image-container img {
  width: 100%; /* Menetapkan lebar gambar penuh */
  height: auto; /* Menyesuaikan tinggi */
  display: block; /* Menghilangkan ruang di bawah gambar */
  object-fit: cover; /* Menutupi seluruh area container */
  position: absolute; /* Memosisikan gambar secara absolut */
  top: 0; /* Menempel di bagian atas container */
  bottom: 0; /* Menempel di bagian bawah container */
  z-index: 1; /* Gambar berada di bawah teks */
}
.bg-color-yellow {
  background-color: var(--color-yellow); /* applies the yellow color as background */
}

.bg-color-orange {
  background-color: var(--color-orange); /* applies the orange color as background */
}

.bg-color-dark-blue {
  background-color: var(--color-dark-blue); /* applies the dark blue color as background */
}

.bg-color-indigo {
  background-color: var(--color-indigo); /* applies the indigo color as background */
}

.bg-color-pink {
  background-color: var(--color-pink); /* applies the pink color as background */
}

.bg-color-green {
  background-color: var(--color-green); /* applies the green color as background */
}

.display-3 {
  font-family: "Gilroy-Bold", serif;
}
.clients-image-container p {
  position: absolute; /* Memosisikan paragraf secara absolut */
  bottom: 10px; /* Atau nilai yang sesuai untuk menempel di atas gambar */
  left: 0;
  width: 100%; /* Menetapkan lebar penuh */
  z-index: 2; /* Ini akan menempatkan teks di atas gambar */
}

/* Memberikan sorotan pada teks yang ditandai */
mark.highlight {
  background: yellow; /* ganti dengan warna yang Anda inginkan */
  animation: highlight 2s infinite; /* animasi */
}

.card .card-img-overlay {
  position: absolute;
  bottom: 0; /* Align to the bottom of the .card */
  left: 0; /* Align to the left of the .card */
  right: 0; /* Align to the right of the .card */
  padding: 0.5rem; /* Add some padding inside the overlay */
}

.card .card-img-overlay .card-title,
.card .card-img-overlay .card-text {
  position: absolute;
  bottom: 10px; /* Adjust this value to move the text up or down */
  left: 10px; /* Adjust this value to move the text left or right */
}

.card-img-overlay .card-title::before,
.card-img-overlay .card-text::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Anda dapat menambahkan kelas spesifik untuk masing-masing kartu untuk menerapkan warna yang berbeda */
.card-img-overlay .first .card-title::before,
.card-img-overlay .first .card-text::after {
  background-color: #f4e242; /* Warna kuning */
}

.card-img-overlay .second .card-title::before,
.card-img-overlay .second .card-text::after {
  background-color: #42f4df; /* Warna cyan */
}
.heart {
  color: #e25555; /* Sets the color of the heart icon to a shade of red */
  font-size: 1.2em; /* Sets the size of the heart icon */
}

footer {
  background-color: #f8f9fa; /* Light grey background, change as needed */
  color: #333; /* Dark grey text color, change as needed */
  border-top: 1px solid #e7e7e7; /* Adds a top border to the footer */
  line-height: 1rem;
}

.d-block {
  display: block; /* This will make the content appear on a new line */
}

.card {
  position: relative; /* Context for absolute positioning */
  overflow: visible; /* Ensures text is not clipped */
  background-color: #2d4b9b;
  border: none; /* Removes any border from the card */
}

.acronym-style h3 {
  font-size: 3.5rem; /* Adjust the font size as necessary */
  font-weight: normal;
  font-family: "Gilroy-Regular", sans-serif;
  color: #4f4f4f; /* Your desired text color */
  margin: 0; /* Removes default margin from p tags */
  line-height: 1.3;
  letter-spacing: 0.5rem;
}

.acronym-letter {
  font-size: 4rem; /* Larger font size for the first letter */
  font-weight: bold;
  font-family: "Gilroy-Bold", sans-serif;
  color: #6db65b; /* Your desired color for the acronym letters */
  margin-right: 0.5rem; /* Adds spacing between the acronym letter and the rest of the word */
}

.our-values span {
  color: #e24903;
}

.human {
  color: #6db65b; /* Example color */
  font-weight: bold;
  /* Any other styles you want to apply specifically to this span */
}

.address-container {
  margin-top: 20px; /* Adjust the margin as needed */
}

.contact-divider {
  border-top: 3px solid red; /* Adjust the color and thickness as needed */
  margin-bottom: 20px; /* Creates space between the line and the address */
}

/* Keyframes untuk animasi */
@keyframes highlight {
  0% {
    background: yellow;
  } /* ganti dengan warna awal */
  50% {
    background: orange;
  } /* ganti dengan warna peralihan */
  100% {
    background: yellow;
  } /* ganti dengan warna akhir */
}

/* Our Clients */
.our-clients {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.logo-container {
  padding: 15px; /* Adjust the padding as necessary */
}

.clients-logo {
  max-height: 100px; /* Set a max-height for all logos */
  width: auto; /* Maintain the aspect ratio */
  display: block; /* Display block to enable margin auto */
  margin: 0 auto; /* Center the logo horizontally */
  object-fit: contain; /* Prevent the logo from being stretched */
}

.logo-row {
  margin-bottom: 20px; /* Adjust the space between rows */
}

.clients-logo:hover {
  transform: scale(1.2);
  transform-origin: center center;
  transition: transform 0.5s ease-in-out;
}

/* Our Teams */
.card-title {
  color: brown;
}

@media (max-width: 768px) {
  .card {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .card {
    width: 18rem;
  }
}

/* Custome Color */
.bg-green {
  background-color: rgba(0, 121, 107, 1); /* Warna hijau tua dalam format rgba() */
}

/* Our Values https://uigradients.com/#Shifter */
#values-one:hover {
  background-image: url("img/values/client-img-2.jpg");
  background-color: rgba(0, 255, 0, 0.5);
  background-blend-mode: multiply;
}

#values-two:hover {
  background-image: url("img/values/client-img-2.jpg");
  background-color: rgba(0, 123, 255, 0.5); /* Warna biru primary dengan transparansi 50% */
  background-blend-mode: multiply;
}

#values-three:hover {
  background-image: url("img/values/client-img-2.jpg");
  background-color: rgba(0, 123, 255, 0.5); /* Warna biru primary dengan transparansi 50% */
  background-blend-mode: multiply;
}

#values-four:hover {
  background-image: url("img/values/client-img-2.jpg");
  background-color: rgba(0, 123, 255, 0.5); /* Warna biru primary dengan transparansi 50% */
  background-blend-mode: multiply;
}

#values-five:hover {
  background-image: url("img/values/client-img-2.jpg");
  background-color: rgba(0, 255, 0, 0.5);
  background-blend-mode: multiply;
}

#values-six:hover {
  background-image: url("img/values/client-img-2.jpg");
  background-color: rgba(0, 255, 0, 0.5);
  background-blend-mode: multiply;
}

.container-values-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

/* Our Communities  */
#communities-img img {
  border-radius: 20px;
  max-width: 80%;
}

.contact-section {
  background: #fff; /* Change this to the desired background color */
  padding: 50px 0; /* Adjust the padding to your preference */
}

.contact-info h2 {
  color: #ff8c00; /* Or any color you prefer */
  font-size: 2.5rem; /* Adjust the size as needed */
  margin-bottom: 20px; /* Spacing below the header */
}

.contact-info p {
  font-size: 1.2rem; /* Adjust the size as needed */
  margin-bottom: 20px; /* Spacing below the paragraph */
}

.vertical-line {
  position: relative;
}

.vertical-line::before {
  content: "";
  position: absolute;
  top: -50px; /* Adjust the position as needed */
  bottom: -50px; /* Adjust the position as needed */
  left: 0;
  width: 3px; /* Same as border width */
  background-color: orange; /* Same as border color */
}


/* Responsive design*/
@media (max-width: 768px) {
  .contact-info {
    text-align: center;
  }

  .text-hello-there {
    font-size: 2rem; /* Ukuran font yang lebih kecil untuk perangkat kecil */
  }

  #who-we-are .col-md-6 {
    text-align: center; /* Menyesuaikan teks agar berada di tengah pada layar kecil */
  }

  .clients-image-container {
    position: relative;
    overflow: hidden; /* Memastikan isi tidak melebihi batas kotak */
  }
}

@media (max-width: 479px) {
  .contact-info {
    text-align: center;
  }

  .text-hello-there {
    font-size: 1.5rem; /* Ukuran font yang lebih kecil untuk perangkat sangat kecil */
  }

  #who-we-are .col-md-6 {
    text-align: center; 
  }

  .clients-image-container {
    position: relative;
    overflow: hidden; /* Memastikan isi tidak melebihi batas kotak */
  }
}