* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
      font-family: 'Arial', sans-serif;
    }

    .cover-contain {
      position: relative;
      width: 100%;
      
      height: 100vh;
      overflow: hidden;
    }

    .slideshow {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .slideshow img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 1.5s ease-in-out;
    }

    .slideshow img.active {
      opacity: 1;
    }

    .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.545);
      z-index: 1;
    }

    .content {
      position: relative;
      z-index: 2;
      text-align: center;
      color: white;
      top: 50%;
      transform: translateY(-50%);
      
      animation: fadeInUp 3s ease-out;
    }

    .content img {
      width: 200px;
      margin-bottom: 10px;
      filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.713));
       /* ធ្វើ logo ឲ្យច្បាស់ */ 
    }
    .title-kh {
      font-size: 46px;
      margin-bottom: 5px;
      font-weight: 300;
      font-family: "Freehand", cursive ;
    }
    .title-en {
      font-size: 48px;
      font-weight: bold;
      color: #ffffff;
      font-family: "Playfair Display", serif;
    }
  
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(50px);
      }
      to {
        opacity: 1;
        transform: translateY(50);
      }
    }
    /* Responsive */
    @media (max-width: 768px) {
      .title-en {
        font-size: 38px; 
      }
      .title-kh {
        font-size: 36px;
      }
      .content img {
        width: 100px;
      }
    }
    @media (max-width: 480px) {
      .title-en {
        font-size: 28px;
      }
      .title-kh {
        font-size: 24px;
      }

      .content img {
        width: 100px;
      }
    }