/**
* Template Name: MeFamily
* Updated: Sep 18 2023 with Bootstrap v5.3.2
* Template URL: https://bootstrapmade.com/family-multipurpose-html-bootstrap-template-free/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,900;1,400;1,900&family=Mitr:wght@300;400&display=swap');

:root {
  --color-first: #65587f;
  --color-second: #f18867;
  --color-third: #e85f99;
  --color-forth: #50bda1;
  --block-width: 300px;
  --block-height: 320px;
  --border-width: .625rem;
  --border-radius-outer: 8px;
  --border-radius-inner: calc(var(--border-radius-outer) / 2);
  --font-plain: 'Mitr', sans-serif;
  --font-special: 'Mitr', sans-serif;
  box-sizing: border-box;
  line-height: 1.4;
}



.rainbow {
  width: 100%;
  height: 100%;
  -webkit-animation: o-rotate-360 linear 8s infinite;
  animation: o-rotate-360 linear 8s infinite;
}

.rainbow span {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transform: translate(-50%, -50%);
}

.rainbow span:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 100%;
}

.rainbow span:first-child {
  background: #ff3131;
}

.rainbow span:first-child:after {
  background: #336ebd;
}

.rainbow span:last-child {
  background: #336ebd;
}


.rainbow span:last-child:after {
  /* background: #50bda1; */
  background: #336ebd;
}

.c-subscribe-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.2);
  border-radius: var(--border-radius-outer);
}


.c-subscribe-box__wrapper {
  width: calc(100%);
  height: calc(100%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 1.2rem 1rem 1.8rem;
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius-inner);
}

.c-subscribe-box__wrapper:hover {
  width: calc(100% - 1.5%);
  height: calc(100% - 2.5%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 1.2rem 1rem 1.8rem;
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius-inner);
}

.c-subscribe-box__title {
  font-size: 1.6rem;
}

.c-subscribe-box__desc {
  font-size: 0.935rem;
  margin: 0.7rem auto 1.8rem;
  max-width: 100%;
}

.c-subscribe-box__form {
  margin-top: auto;
}

.c-form--accent input:hover,
.c-form--accent input:active,
.c-form--accent input:focus {
  border-color: var(--color-third);
  box-shadow: 0 0 0 3px rgba(232, 94, 152, 0.25);
}

#toonbutton .icon-box {
  border: 1px solid rgba(255, 255, 255, 0.3);
}

#toonbutton:hover .icon-box {
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: 0.7s all;
}



@-webkit-keyframes o-rotate-360 {
  0% {
      transform: rotate(0);
  }

  100% {
      transform: rotate(360deg);
  }
}

@keyframes o-rotate-360 {
  0% {
      transform: rotate(0);
  }

  100% {
      transform: rotate(360deg);
  }
}


.u-align-center {
  text-align: center;
}

h1, h2, h3, h4, h5 {
  font-family: 'Mitr', sans-serif;
}

a:hover{text-decoration: none;
border: none;
transition: 0.7s all;
}



/* ปรับขนาด h1 */
@media (min-width: 769px) {
  #heronoslide h1 {
    font-size: 21px;
    line-height: 42px;
  }
}
@media (min-width: 768px) {
  #heronoslide h1 {
    font-size: 21px;
    line-height: 42px;
  }
}

/*--หน้าแรก---------------------------------------------------------------------*/
#heronoslide h1 {
}

#heronoslide{
  text-align: center;  
  padding: 1.5vh;
  padding-top: 10vh;
  /* z-index: -1; */
}

.index-container {
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 0px 0px; 
}

.sixbutton {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 40px 40px; 
  grid-template-areas: 
    ". . ."
    ". . ."; 
    border-radius: 50px;
}
.sixbutton .card-body {
  padding: 0vh;padding: 5vh 0vh;
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(239,239,239,1) 8%, rgba(255,255,255,1) 20%, rgba(239,239,239,1) 38%, rgba(255,255,255,1) 100%);
  border-radius: 7px;
}
.sixbutton .card-body:hover {
  transition: 0.7s all;
  background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(217,233,233,1) 8%, rgba(255,255,255,1) 20%, rgba(217,233,233,1) 38%, rgba(255,255,255,1) 100%);
}
.sixbutton .card-body:hover h3 {
  color: #ff5011;
  transition: 0.7s all;
}

.sixbutton .card-body img{
  height: 7vh;
}

.sixbutton .card-body h3{
  color: #1c5dae;
  margin: 0;
  margin-top: 1vh;
  margin-bottom: 1vh;
}

.portfolio-info ul{
  list-style: none;
  padding-left: 0;
  font-size: 0.8rem;
}

.portfolio-info ul li{
  display: block;
  width: 100%;
  border-bottom: 1px solid #dedede;
  padding-bottom: 1vh;
}
.portfolio-info ul li:last-child{
  border-bottom: none;
  text-align: left;
}


.make-me-sticky {
  position: -webkit-sticky;
	position: sticky;
	top: 0;
    
  padding: 0 15px;
}

/* swiper bullet hide */
.carousel-indicators {
  display: none;
}
.section-title h2 {
  font-size: 1.5rem;
  line-height: 2.1rem;
}


.portfolio-info {
  padding: 10px;
  border: none;
  box-shadow:none;
}


@media (min-width: 1441px) {
  #heronoslide{height: 79vh;
    margin-bottom: 0.05vh;
  }

  #heronoslide h1 {
  }
  .section-footer {padding-top: 1vh;}
  .section-title {padding-bottom: 0;}
  .portfolio-info ul{font-size: 1rem;}
  .section-title h2 {
    font-size: 1.5rem;
    line-height: 2.1rem;
  }
  .portfolio-info {
    padding: 30px;
    box-shadow: 0px 0 30px rgba(43, 35, 32, 0.08);
    border-radius: 5px;
    border: 1px solid #e1e1e1;
  }

  #heronoslide h2 {
    font-size: 3rem; text-transform:Capitalize;line-height: 2.2rem
  }
  #heronoslide h2  span{
    font-size: 1.5rem;line-height: 0.8rem
  }

}

@media (max-width: 1440px) {
  #heronoslide{height: 69vh;
    margin-bottom: 0.05vh;
  }
  #heronoslide h1 {
    font-size: 1.7rem;
    line-height: 2.8rem;
  }
  /* .section-footer {padding-top: 1vh;} */
  .section-title {padding-bottom: 0;}
  .portfolio-info ul{font-size: 1rem;}
  .section-title h2 {
    font-size: 1.5rem;
    line-height: 2.1rem;
  }
  .portfolio-info {
    padding: 30px;
    box-shadow: 0px 0 30px rgba(43, 35, 32, 0.08);
    border-radius: 5px;
    border: 1px solid #e1e1e1;
  }
}

@media (max-width: 1024px) {
  #heronoslide{height: 69vh;
    margin-bottom: 0.05vh;
  }
  #heronoslide h1 {
    font-size: 1.7rem;
    line-height: 2.2rem;
  }
  .sixbutton .card-body h3{
  font-size: 1rem;
  }
  .section-footer {padding-top: 1vh;}
  .section-title {padding-bottom: 0;}
  .portfolio-info ul{font-size: 1rem;}
  .section-title h2 {
    font-size: 1.5rem;
    line-height: 2.1rem;
  }
  .nomorepadding p, 
  .nomorepadding section{
    padding-top: 0;
  }
  .nomorepadding p
  {
    padding: 0.5vh!important;
    text-align: left;
  }
  .nomorepadding .about-ltr .content h3{
    margin-bottom: 0;
  }
}


@media (max-width:768px){
  #heronoslide{height: 72vh;
    margin-bottom: 0.05vh;
  }
  #heronoslide h1 {
    font-size: 1.7rem;
    line-height: 2.2rem;
  }
  .section-footer {padding-top: 1vh;}
  .section-title {padding-bottom: 0;}
  .portfolio-info ul{font-size: 1rem;}
  .section-title h2 {
    font-size: 1.5rem;
    line-height: 2.1rem;
  }
  .portfolio-info {
    padding: 30px;
    box-shadow: 0px 0 30px rgba(43, 35, 32, 0.08);
    border-radius: 5px;
    border: 1px solid #e1e1e1;
  }
  .nomorepadding p, 
  .nomorepadding section{
    padding-top: 0;
  }
  .nomorepadding p
  {
    padding: 2vh!important;
    text-align: left;
  }
  .nomorepadding .about-ltr .content h3{
    margin-bottom: 0;
  }
}

@media (max-width:425px){
  /* #heronoslide{height: 72vh;} */
  #heronoslide{height: 82vh;
    margin-bottom: 0.05vh;
  }
  #heronoslide h1 {
    font-size: 1.3rem;
    line-height: 1.9rem;
  }
  .sixbutton {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr; 
    gap: 10px 10px; 
    grid-template-areas: 
      ". ."
      ". ."
      ". ."; 
  }
  .section-footer {padding-top: 1vh; }
  .portfolio-info ul{font-size: 0.8rem; }
  .section-title h2 {
    font-size: 1.2rem;
    line-height: 1.9rem;
  }
  .portfolio-info {
    padding: 10px;
    border: none;
    box-shadow:none;
  }
  .nomorepadding p, 
  .nomorepadding section{
    padding-top: 0;
  }
  .nomorepadding p
  {
    padding: 2vh!important;
    text-align: left;
  }
  .nomorepadding .about-ltr .content h3{
    margin-bottom: 0;
  }
}

@media (max-width:375px){
  /* #heronoslide{height: 70vh;} */
  #heronoslide{height: 82vh;
    margin-bottom: 0.05vh;
  }
  #heronoslide h1 {
    font-size: 1.2rem;
    line-height: 1.9rem;
  }
  .sixbutton {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr; 
    gap: 10px 10px; 
    grid-template-areas: 
      ". ."
      ". ."
      ". ."; 
  }
  .section-footer {padding-top: 1vh; }
  .section-title h2 {
    font-size: 1.1rem;
    line-height: 1.4rem;
  }
  .portfolio-info {
    padding: 10px;
    border: none;
    box-shadow:none;
  }
  .nomorepadding p, 
  .nomorepadding section{
    padding-top: 0;
  }
  .nomorepadding p
  {
    padding: 2vh!important;
    text-align: left;
  }
  .nomorepadding .about-ltr .content h3{
    margin-bottom: 0;
  }

}

@media (max-width:320px){
  #heronoslide{height: 75vh;
  margin-bottom: 0.05vh;}
  .hero-container{margin-top: 1vh;padding-top: 10vh;}
  .index-container{
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 0px 0px; 
  }
  #heronoslide h1 {
    font-size: 1.2rem;
    line-height: 1.9rem;
  }
  .sixbutton {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr; 
    gap: 10px 10px; 
    grid-template-areas: 
      ". ."
      ". ."
      ". ."; 
  }
  
  .sixbutton .card-body img{
    height: 7vh;
  }
  .section-footer {padding-top: 1vh; }
  .section-title h2 {
    font-size: 0.9rem;
    line-height: 1.4rem;
  }
  .portfolio-info {
    padding: 10px;
    border: none;
    box-shadow:none;
  }
  .nomorepadding p, 
  .nomorepadding section{
    padding-top: 0;
  }
  .nomorepadding p
  {
    padding: 1.5vh!important;
    text-align: left;
  }
  .nomorepadding .about-ltr .content h3{
    margin-bottom: 0;
  }

}