* {
  padding: 0;
  margin: 0;
  image-rendering: optimizeQuality;
}

img {
  aspect-ratio: initial;
  image-rendering: optimizequality;
}

.landing-page-background {
  position: relative;
  margin: 0px 0px;
  /* background: url("https://www.bgiglass.com/data_landing_page/Rama10_HBD_17072025/bg.jpg"); */
  /* background: url("https://www.bgc.co.th/data_landing_page/Rama10_HBD_17072025/bg.jpg"); */
  /* background: url("https://www.bgf.co.th/data_landing_page/Rama10_HBD_17072025/bg.jpg"); */
  background: url("https://www.bge.co.th/data_landing_page/Rama10_HBD_17072025/bg.jpg");
  /* background: url("https://www.wishingtreeresort.com/data_landing_page/Rama10_HBD_17072025/bg.jpg"); */
  /* background: url("https://www.watermillgolf.com/data_landing_page/Rama10_HBD_17072025/bg.jpg"); */
  /* background: url("https://www.bgputd.com/data_landing_page/Rama10_HBD_17072025/bg.jpg"); */
  /* background: url("https://www.bgforsociety.org/data_landing_page/Rama10_HBD_17072025/bg.jpg"); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  width: 100vw;
  min-height: 100vh;
}

.landing-page-container {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 10px));
  z-index: 3;
  text-align: center;
}

.landing-image {
  width: 100%;
}

.landing-image img {
  width: 354px;
  /* width: 454px; */
}

.landing-content {
  width: 100%;
  margin-top: 10px;
}

.landing-content img {
  /* width: 406px; */
  /* width: 506px; */
  width: 420px;
}

.landing-button {
  width: 100%;
  margin-top: 20px;
}

.landing-button img {
  /* width: 180px; */
  width: 130px;
}

/*  ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 300px to 480px */
@media (min-width: 300px) and (max-width: 480px) {
  .landing-page-container {
    top: 80px;
    transform: translate(-50%, 0);
  }

  /* .landing-image img {
        width: 65%;
    }     */

  /* .landing-content img {
        width: 90%;
    } */

  .landing-image img {
    /* width: 65%;
        max-width: 220px; */
    /* width: 55%;
        max-width: 210px; */
    width: 80%;
    max-width: 260px;
  }

  .landing-content img {
    /* width: 90%;
        max-width: 340px; */
    /* width: 100%;
    max-width: 350px; */
    width: 100%;
    max-width: 400px;
  }

  .landing-content {
    margin-top: 10px;
  }

  .landing-button {
    margin-top: 20px;
  }
}

/*  ##Device = Most of the Smartphones Mobiles (Landscape)
    ##Screen = B/w 300px to 480px */
@media (min-width: 300px) and (max-width: 480px) and (orientation: landscape) {
  .landing-page-container {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 5px));
    z-index: 3;
    text-align: center;
  }

  .landing-image img {
    /* width: 60%; */
    /* width: 158px; */
    width: 148px;
  }

  .landing-content img {
    /* width: 356px; */
    width: 346px;
  }

  .landing-button img {
    width: 160px;
  }
}

/*  ##Device = Low Resolution Tablets, Mobiles (Portrait)
    ##Screen = B/w 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .landing-image img {
    width: 244px;
  }
}

/*  ##Device = Most of the Smartphones Mobiles (Landscape)
    ##Screen = B/w 481px to 991px */
@media (min-width: 481px) and (max-width: 991px) and (orientation: landscape) {
  .landing-page-container {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 20px));
    z-index: 3;
    text-align: center;
  }

  .landing-image img {
    /* width: 142px; */
    /* width: 35vh; */
    width: 25vh;
  }

  .landing-content img {
    /* width: 332px; */
    /* width: 60vh; */
    /* width: 70vh; */
    width: 80vh;
  }

  .landing-button img {
    /* width: 144px; */
    width: 27vh;
  }

  /* .landing-button {
        margin-top: 14px;
    } */
}

/*  ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  .landing-page-container {
    transform: translate(-50%, calc(-50% - 20px));
  }

  .landing-image img {
    /* width: 25vh; */
    width: 40vh;
  }

  .landing-content img {
    /* width: 50vh; */
    /* width: 55vh; */
    width: 65vh;
  }

  .landing-button img {
    width: 25vh;
  }
}

/*  ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 992px to 1280px */
@media (min-width: 992px) and (max-width: 1280px) {
  .landing-image img {
    /* width: 354px; */
    width: 45vh;
  }

  .landing-content img {
    width: 406px;
  }
}

/*  ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 992px to 1280px */
@media (min-width: 992px) and (max-width: 1280px) and (orientation: landscape) {
  .landing-page-container {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 20px));
    z-index: 3;
    text-align: center;
  }

  .landing-image img {
    /* width: 28vh; */
    /* width: 50vh; */
    width: 40vh;
  }

  .landing-content img {
    /* width: 52vh; */
    /* width: 55vh; */
    width: 65vh;
  }

  .landing-button img {
    width: 23vh;
  }
}

/*  ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {}

/*  ##Device = Desktops
    ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px) {
  .landing-content {
    margin-top: 10px;
  }

  .landing-image img {
    /* width: 334px; */
    /* width: 30vh; */
    width: 40vh;
    /* width: 50vh; */
  }

  .landing-content img {
    /* width: 406px; */
    /* width: 50vh; */
    /* width: 60vh; */
    /* width: 70vh; */
    width: 90vh;
  }

  .landing-button {
    margin-top: 20px;
  }

  .landing-button img {
    /* width: 23vh; */
    width: 26vh;
  }
}

/*  ##Device = Desktops
    ##Screen = 1600px to higher resolution desktops */
@media (min-width: 1600px) {
  /* .landing-image img {
        width: 404px;
    } */

  .landing-image img {
    /* width: 244px; */
    width: 290px;
  }

  .landing-content img {
    /* width: 448px; */
    width: 90vh;
  }

  .landing-button img {
    width: 192px;
  }
}

@media (min-width: 600px) and (max-width: 991px) and (orientation: landscape) {
  .landing-page-container {
    /* top: 20px; */
    top: 10px;
    transform: translate(-50%, 0);
  }

  .landing-image img {
    /* width: 35vh;
    max-width: 170px; */
    /* width: 30vh;
        max-width: 100px; */
    width: 40vh;
    max-width: 230px;
  }

  .landing-content img {
    /* width: 65vh;
    max-width: 300px; */
    /* width: 60vh;
        max-width: 180px; */
    width: 70vh;
    max-width: 380px;
  }

  .landing-button {
    margin-top: 10px;
  }
}