@font-face {
  font-family: "kosugi";
  src: url("asset/Kosugi-Regular.ttf");
}

@font-face {
    font-family: "coolvetica";
    src: url("asset/coolvetica rg.otf");
  }
  
  @font-face {
    font-family: "heveticaLight";
    src: url("asset/helvetica-light.ttf");
  }
  
  body {
    padding: 50px 25px;
    height: auto;
  }
  
  .parent-container {
    display: flex; /* Use Flexbox */
    align-items: center; /* Vertically center items */
    justify-content: space-between; /* Space between elements */
  }
  
  .hi {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    font-family: "heveticaLight", sans-serif;
    color: black;
    font-size: 36px;
    font-weight: 400;
    justify-content: flex-start;
  }

  .main-title {
    font-size: 128px; /* Default size for larger screens */
    font-family: "coolvetica", sans-serif;
    margin-top: -30px; /* Adjust if needed */
}

.hi-2 {
    margin-top: -125px; /* Adjust if needed */
}
  
  .kebab-menu {
    position: fixed;
    top: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    z-index: 1000;
  }
  
  .dot-container {
    position: relative;
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
  
  .dots {
    width: 20px;
    height: 20px;
    border: 2px solid black;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.3s ease;
  }
  
  .dots.active {
    background-color: black;
  }
  
  .tooltip {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: black;
    padding: 5px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-family: "heveticaLight", sans-serif;
    font-size: 18px;
    font-weight: 400;
  }
  
  .dot-container:hover .tooltip {
    opacity: 1;
  }

  .image-container {
    position: relative; /* Necessary for positioning the GIF */
    text-align: center; /* Center the main image */
    margin-top: -25px; /* Space above the images, adjust as needed */
  }
  
  .image-container img {
    width: 550px;
    height: auto;
  }
  
  .hover-gif {
    display: none; /* Hide the GIF by default */
    position: absolute; /* Position GIF over the main image */
    top: -6%; /* Align with the top of the container */
    left: 60%; /* Center it horizontally */
    transform: translateX(-50%); /* Adjust to center */
    width: 50%; /* Set the width to 50% of the main image, adjust as needed */
    max-width: 300px; 
    height: auto; /* Maintain aspect ratio */
  }
  
  .image-container:hover .hover-gif {
    display: block; /* Show the GIF on hover */
  }
  
  .works {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: "coolvetica", sans-serif;
    color: black;
    font-size: 36px;
    font-weight: 400;
  }
  
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Add space between the items if needed */
  }
  
  .flex-item {
    flex: 1 1 calc(33.33% - 10px); /* 3 columns, accounting for the gap */
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
  }

  .flex-item img {
    width: 400px; /* Set a fixed width */
    height: 296px; /* Set a fixed height */
}
  
  
  .facts-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
    position: relative;
  }
  
  .fact {
    opacity: 0;
    transform: translateX(100px);
    transition: transform 1s ease-out, opacity 1s ease-out;
    padding: 10px;
    font-family: "kosugi", sans-serif;
    font-size: 18px;
  }
  
  .fact1 { grid-column: 1 / 2; grid-row: 1 / 2; }
  .fact2 { grid-column: 2 / 3; grid-row: 2 / 3; }
  .fact3 { grid-column: 3 / 4; grid-row: 3 / 4; }
  
  .fact.visible {
    transform: translateX(0);
    opacity: 1;
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    color: black;
    font-size: 20px;
    font-family: "coolvetica", sans-serif;
    z-index: 1000;
    border-top: 2px black solid;
  }

  .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2.5px 15px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .footer-left {
    text-align: left;
  }

  .footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 5px;
  }

  .footer-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: black;
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .footer-arrow {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }

  @media (max-width: 768px) {

    .hi {
      font-size: 24px;
    }

    .main-title {
      font-size: 64px; /* Smaller size for mobile devices */
      margin-top: -15px; /* Adjust margin for mobile */
  }

  .hi-2 {
      margin-top: -50px; /* Adjust margin for mobile */
      font-size: 24px; /* Adjust font size for mobile */
  }

    .kebab-menu {
      right: 10px;
      top: 10px;
    }
    
    .tooltip {
      display: none;
    }

    .image-container img {
      width: 400px;
      height: auto;
    }
    
    .works {
      font-size: 24px;
    }

    .flex-item img {
      width: 350px; /* Set a fixed width */
      height: 259px; /* Set a fixed height */
  }

    .facts-container {
      grid-template-columns: 1fr;
    }

    .fact {
      font-size: 16px;
    }

    .fact1, .fact2, .fact3 {
      grid-column: 1;
    }
    .fact1 { grid-row: 1; }
    .fact2 { grid-row: 2; }
    .fact3 { grid-row: 3; }


    .footer {
      font-size: 16px;
    }

    .footer-content {
      flex-direction: column;
      padding: 0px 15px;
    }

    .footer-right {
      margin-top: 10px;
    }
  }


  @media (max-width: 430px) {

    .hi {
      font-size: 24px;
    }

    .main-title {
      font-size: 64px; /* Smaller size for mobile devices */
      margin-top: -15px; /* Adjust margin for mobile */
  }

  .hi-2 {
      margin-top: -50px; /* Adjust margin for mobile */
      font-size: 24px; /* Adjust font size for mobile */
  }

    .kebab-menu {
      right: 10px;
      top: 10px;
    }
    
    .tooltip {
      display: none;
    }

    .image-container img {
      width: 300px;
      height: auto;
    }

    .hover-gif {
      width: 30%; /* Set the width to 50% of the main image, adjust as needed */
      max-width: 150px; 
      height: auto; /* Maintain aspect ratio */
    }
    
    .works {
      font-size: 24px;
    }

    .flex-item img {
      width: 300px; /* Set a fixed width */
      height: 222px; /* Set a fixed height */
  }

    .facts-container {
      grid-template-columns: 1fr;
    }

    .fact {
      font-size: 16px;
    }

    .fact1, .fact2, .fact3 {
      grid-column: 1;
    }
    .fact1 { grid-row: 1; }
    .fact2 { grid-row: 2; }
    .fact3 { grid-row: 3; }


    .footer {
      font-size: 16px;
    }

    .footer-content {
      flex-direction: column;
      padding: 0px 15px;
    }

    .footer-right {
      margin-top: 10px;
    }
  }