/* --- Inter Font Family --- */

/* Thin (100) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  src: url('../font/Inter/Inter_24pt-Thin.ttf') format('truetype');
}

/* ExtraLight (200) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: url('../font/Inter/Inter_24pt-ExtraLight.ttf') format('truetype');
}

/* Light (300) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../font/Inter/Inter_24pt-Light.ttf') format('truetype');
}

/* Regular (400) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../font/Inter/Inter_28pt-Regular.ttf') format('truetype');
}

/* Italic (400) */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  src: url('../font/Inter/Inter_28pt-Italic.ttf') format('truetype');
}

/* Medium (500) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../font/Inter/Inter_28pt-Medium.ttf') format('truetype');
}

/* SemiBold (600) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../font/Inter/Inter_28pt-SemiBold.ttf') format('truetype');
}

/* Bold (700) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../font/Inter/Inter_28pt-Bold.ttf') format('truetype');
}

/* ExtraBold (800) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('../font/Inter/Inter_28pt-ExtraBold.ttf') format('truetype');
}


body {
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
  color:#2e2e2e;
  /*font-weight: 400;*/
}
body main{
  padding-top:80px;
}
p{
  margin-bottom:0;
}
header nav{
  background-color: #FFF;
  border:1px solid #FFF;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}
.text-gradient-thai
{
  background-image: linear-gradient(to right, #10b981, #06b6d4); /* Emerald and Cyan blend */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-attachment: fixed;
}
.box{
  background-color: #ffffff7a;
  padding: 1.5rem;
  border-radius: 20px;
  border: 1px solid #FFF;
}
.box-2{
  background-color:#29ab594a;
  padding: 1.5rem;
  border-radius: 20px;
  border: 1px solid #28aa58;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  position: fixed;
  overflow: hidden;
  border-radius: 0; 
  z-index: -1;
  pointer-events: none;
}

.wrapper div {
  position: absolute;
  filter: blur(15vmin);
  opacity: 0.8;
}

.animated .one {
  border-radius: 100%;
  width: 200vmin;
  height: 200vmin;
  background-color: #FFF;
  left: -12.5vmin;
  top: -75vmin;
  z-index: 3;
  animation: fly 12s linear infinite;
  transform: rotate(0) translate(20vmin) rotate(0);
}

.animated .two {
  width: 125vmin;
  height: 200vmin;
  background-color: #10b981;
  bottom: -7.5vmin;
  left: -20vmin;
}

.animated .three {
  border-radius: 100%;
  width: 112.5vmin;
  height: 112.5vmin;
  bottom: -20vmin;
  right: -25vmin;
  background-color: #06b6d4;
  animation: flyPlus 8s linear infinite;
  transform: rotate(0) translate(25vmin) rotate(0);
}

@keyframes fly {
  100% {
    transform: rotate(1turn) translate(25vmin) rotate(-1turn);
  }
}

@keyframes flyPlus {
  100% {
    transform: rotate(-1turn) translate(25vmin) rotate(1turn);
  }
}
.icon-box{
  width:100px;
  flex:none;
  display: flex;
  justify-content: center;
  align-content: center;
}
.icon-box > svg{
  width:60px;
  height:60px;
  margin:auto;

}
footer{
  background-color: rgb(10, 37, 64);
}

@media (min-width: 576px) {
  #heading1{
    font-size: 2.5rem !important;
  }
}
@media (min-width: 768px) {
  #heading1{
    font-size: 3rem !important;
  }
}
@media (min-width: 1200px) {
  #heading1{
    font-size: 4rem !important;
  }
}