@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap');
:root {
  --tpablue: #034ea2;
  --tpagold: #d09b2c;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  /*--bs-body-font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;*/
  --bs-body-font-family: "Noto Sans Thai", system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-header-font-family: "Noto Sans Thai", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-border-radius: 0.375rem;
  --bs-link-color: var(--tpablue);
  --bs-link-hover-color: var(--tpablue);
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  -webkit-text-size-adjust: 100%;
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-family:  var(--bs-header-font-family);
  font-weight: 700;
  line-height: 1.2;
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}



.nav-lang { margin: 0; padding: 5px 0; background-color: #000; text-align: right; }
.nav-lang ul { margin: 0; padding: 0; list-style-type: none; }
.nav-lang ul li { display: inline-block; padding-right: 8px; padding-left: 8px; }
/*.nav-lang ul li { display: inline-block; padding-right: var(--bs-navbar-nav-link-padding-x); padding-left: var(--bs-navbar-nav-link-padding-x); }*/
.nav-lang ul li, .nav-lang ul li a { color: #FFF; text-decoration: none; }
.navbar { background-color: rgba(0, 0, 0, 0.85); font-family:  var(--bs-header-font-family); }
.navbar .nav-flag-link img { margin-bottom: 0; padding-bottom: 0; }
.page-section { padding-top: 2.5rem; padding-bottom: 1.5rem; }
/* .carousel-link { color: #ffffff; } .carousel-link:hover { color: var(--tpagold); } */
#home-about > div { padding-left: 0; padding-right: 0; background-color: var(--tpablue); }
#home-about .carousel-caption h5, #home-about .carousel-caption { font-family:  var(--bs-header-font-family); font-size: 4rem; text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.75); }
/* #home-intro h1 span { display: none; } */
#home-about .carousel-item img { height: auto; }
#home-intro h1 img { padding: 1rem 2.4rem; }
#home-service { background-color: var(--tpablue); background-image: url("../images/service-bg.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; color: #ffffff; }
/*
#home-service .home-service-box-a { margin: 1rem 1.5rem; padding: 2rem; background-color: rgba(0, 0, 0, 0.15); }
#home-service .home-service-box-b { margin: 1rem 0; padding: 2rem; background-color: rgba(255, 255, 255, 0.1); }
#home-service .home-service-box-a { margin: 1rem 1.5rem; padding: 2rem; background-color: rgba(3, 67, 138, 0.9); }
#home-service .home-service-box-b { margin: 1rem 0; padding: 2rem; background-color: rgba(29, 96, 171, 0.9); }
*/
#home-service .home-service-box-a { margin: 1rem 1.5rem; padding: 2rem; background-color: #e4d262; color: #222; }
#home-service .home-service-box-b { margin: 1rem 0; padding: 2rem; background-color: #e4d262; color: #222; }
#home-service img { border: 1px solid #ffffff;}
#home-service hr { margin-bottom: 0; padding-bottom: 0; }
#home-service .home-service-box-b .card-img-top { height: auto; }
#home-service .home-service-box-b .card-title { font-size: 1.25rem; }
#home-intro div[class^='col-'], #home-service div[class^='col-'] { margin-bottom: 0.5rem; }
#home-intro p { font-size: 1.2rem; }
#home-video { background-color: var(--bs-body-color); color: #ffffff; }
#home-gallery { background-color: var(--tpablue); color: #fefefe; }
#home-gallery .carousel-control-prev-icon, .carousel-control-next-icon { filter: drop-shadow(1px 1px 2px black); }
#home-gallery #carouselTPA29Gallery .carousel-caption { right: 0; left: 0; bottom: 0; padding-top: 4.25rem; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); }
#home-plan .row { margin-top: 1.5rem; }
#home-plan dl { font-family:  var(--bs-header-font-family); font-size: 1.2rem; }
#home-plan dl dt { font-size: 2.8rem; padding-bottom: 0.1rem; margin-bottom: 2rem; border-bottom: 2px solid #00aeef; }
#home-plan dl dd::before { content:"• "; margin-right: 1rem; color: #aaaaaa; }
#home-plan img { padding: 1rem; transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out;}
#home-plan img:hover { padding: 0.25rem; transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out;}
#home-contact { background-color: var(--tpablue); background-image: url("https://www.tpa.or.th/page/HozumiFoundationJapaneseSpeechContest/assets/img/map-image.png"); background-size: cover; background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; font-size: 1.2rem; }
#home-contact address { background-color: rgba(255, 255, 255, 1); border-left: 5.5rem solid rgba(255, 255, 255, 0.4); border-top: 3rem solid rgba(255, 255, 255, 0.4); border-right: 5.5rem solid rgba(255, 255, 255, 0.4); border-bottom: 3rem solid rgba(255, 255, 255, 0.4); background-clip: padding-box; }
#home-contact h4 { font-size: 2.1rem; }
#home-contactbtn { background-color: #092f68; }
#home-contactbtn h2 { color: #fff; }
#home-contactbtn .btn-lg { font-size: 2em; }
.anchor { display: block; position: relative; top: -40px; visibility: hidden; }
footer { background-color: var(--bs-body-color); color: #ffffff; }
#home-contact h2, footer a { color: #ffffff; text-decoration: none; }
footer a:hover { animation: color-change 1s infinite alternate; }
footer .footer-socials { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; }
footer .footer-socials li { margin: 0 10px; } footer .footer-socials li a img { width: 32px; height: auto; border-radius: 50%; }
@keyframes color-change { 0% { color: #ffffff; } 100% { color: var(--tpagold); } }
.img-popGallery:hover { cursor: pointer; }
.text-hilight { color: var(--tpablue); }

@media (max-width: 1199.98px) {
  #home-about .carousel-caption h5, #home-about .carousel-caption * { font-size: 3rem !important; }
  #home-contact address { border-width: 1.5rem !important; }
}

@media (max-width: 991.98px) {
  #home-about .carousel-caption h5, #home-about .carousel-caption * { font-size: 2.5rem !important; }
  #home-contact address { border-width: 1.5rem !important; }
}

@media (max-width: 767.98px) {
  #home-about .carousel-caption h5, #home-about .carousel-caption * { font-size: 2rem !important; }
  #home-contact address { border-width: 1rem !important; }
  .text-hidden-sm { display: none; }
}

@media (min-width: 576px) {
  #carouselTPA29Gallery .carousel-control-next { right: -7em; }
  #carouselTPA29Gallery .carousel-control-prev { left: -7em; }
}
@media (min-width: 1200px) {
  #carouselTPA29Gallery .carousel-control-next { right: -10em; }
  #carouselTPA29Gallery .carousel-control-prev { left: -10em; }
}