@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400; /* Regular */
}
@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold */
}
@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800; /* Extra Bold */
}
@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Light.ttf') format('truetype');
    font-weight: 200; /* Light */
}

body {
    margin: 0px;
    display: contents;
    font-family: Arial, sans-serif;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

.background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/bg-image.png');
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.content {
    margin: 0px;
    text-align: center;
    color: white;
}

.logo-top{
    padding-top: 24px;
    margin-bottom: 24px;
}

.logo-top > img{
    width: 240px;
}

.content-typo{
    margin-top: 32px;
    /* margin-bottom: 60px; */
}
.content-typo > h1{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 70px;
    margin: 0px;
}


.container-ovl {
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 13%) /* Warna hitam dengan transparansi 50% */
  }
  
  .center-border {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; /* Sesuaikan lebar border */
    height: 2px;
    background-color: white;
    margin-top: 32px;
    margin-bottom: 40px;
  }

  /* .content-desc{
    margin-top: 60px;
  } */
  .content-desc > h2{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 28px;
    margin: 0px;
    line-height: 150%;
}

.content-footer > h3{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 24px;
    margin: 0px;
    line-height: 150%;
    margin-top: 60px;
}

.container {
    display: inline-flex;
    grid-template-columns: 1fr 1fr; /* Membagi container menjadi 2 kolom yang sama lebar */
    gap: 100px; /* Memberikan jarak antar kolom */
    margin: 24px 0px;
  }
  
  .column {
    text-align: center;
    display: inline-flex;
  }

  .column > p >a{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 24px;
    text-align: center;
    margin: 0px;
    color: white;
   text-decoration: none;
  }

  .icons{
        max-width: 80%;
        height: auto;
        margin-right: 8px;
        align-content: center;
  }

  .footer{
    margin-bottom: 80px;
  }

  @media (max-width: 768px) { 
  /* For devices with a maximum width of 768 pixels (e.g., tablets) */

  body {
    display: flex; /* Change to flexbox for better responsiveness */
   /*  flex-direction: column; Stack elements vertically */
    align-items: center;
    text-align: center; /* Center text for smaller screens */
    margin: 0px 20px;
  }

  .column {
    text-align: center;
    display: flex;
    margin: 0px;
    justify-content: center;
    align-items: center;
  }

  .logo-top > img {
    width: 200px; /* Adjust logo size */
  }

  .content-typo > h1 {
    font-size: 48px; /* Adjust font size for smaller screens */
  }

  .content-desc > h2 {
    font-size: 18px;    
  }

  .content-footer > h3 {
    font-size: 16px;
    margin: 0px;    
    margin-top: 100px;
  }

  .container {
    display: flex; /* Use flexbox for better responsiveness */
    flex-direction: column; /* Stack columns vertically */
    gap: 0px; /* Adjust gap between columns */
    margin: 20px 0px 0px 0px;
  }

  .column > p > a{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    margin: 0px;
    color: white;
    text-decoration: none;
  }

  .icons {
    max-width: 40%; /* Adjust icon size */
  }
}

@media (max-width: 480px) { 
  /* For devices with a maximum width of 480 pixels (e.g., smartphones) */

  .logo-top > img {
    width: 200px; /* Further reduce logo size */
  }

  .content-typo > h1 {
    font-size: 36px; 
  }

  .content-desc > h2 {
    font-size: 16px;
  }

.content-footer > h3 {
    font-size: 16px;
    margin: 0px;
    margin-top: 100px;
  }

  .container {
    gap: 0px; 
  }

  .column > p > a{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    margin: 0px;
    color: white;
    text-decoration: none;
  }

  .icons {
    max-width: 40%; 
  }
}