@import url('https://fonts.googleapis.com/css2?family=Markazi+Text:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Markazi+Text:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nova+Round&display=swap&effect=vintage|brick-sign|crackle|decaying|destruction|distressed|fragile|grass|ice|mitosis|putting-green|scuffed-steel|splintered|stonewash');
/*shadow-multiple|fire-animation|emboss|3d|3d-float|outline|fire|vintage|brick-sign|crackle|decaying|destruction|distressed|fragile|grass|ice|mitosis|putting-green|scuffed-steel|splintered|stonewash*/
body {
  font-family: "Kanit", sans-serif;
  font-size: 16px !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Kanit", sans-serif;
}


p{
  line-height: 1.8;
  color: grey;
  text-align: justify;
}

footer p {
  all: unset;
}

.text-shadow {
  
  text-shadow: 1px 1px 1px black; 
}

.text-shadow-2 {
    text-shadow: 1px 1px 2px black;
} 

.text-outline {
    text-shadow: 0px -1px 1px #000, -1px 0px 1px #000 !important;
}

.box-shadow {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); 

} 
      
.box-shadow-2 {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); /* black shadow with 50% opacity */

}
.cursor-pointer {
  cursor: pointer;
}
.text-gold{ color: #FEA003;}
.bg-gold{ background-color: #FEA003;}

.ss-font1 { font-family: 'Kanit' !important;}
.ss-font2 { font-family: 'Markazi Text' !important;}


.ss-size06 { font-size: 6px !important;}
.ss-size08 { font-size: 8px !important;}
.ss-size10 { font-size: 10px !important;}
.ss-size12 { font-size: 12px !important;}
.ss-size13 { font-size: 13px !important;}
.ss-size14 { font-size: 14px !important;}
.ss-size16 { font-size: 16px !important;}
.ss-size18 { font-size: 18px !important;}
.ss-size20 { font-size: 20px !important;}
.ss-size22 { font-size: 22px !important;}
.ss-size24 { font-size: 24px !important;}
.ss-size26 { font-size: 26px !important;}
.ss-size28 { font-size: 28px !important;}
.ss-size30 { font-size: 30px !important;}
.ss-size32 { font-size: 32px !important;}
.ss-size34 { font-size: 34px !important;}
.ss-size36 { font-size: 36px !important;}

a:link {text-decoration: none !important;}
a:hover {text-decoration: none !important;}

.ss-mustard-orange{ background-color: #EAAA00;}
.ss-mustard-gold{ background-color: #ffcc00;}
.ss-text-mustard-gold{ color: #ffcc00; text-shadow: 2px 2px 1px black; }
.ss-banana-yellow{ background-color: #FEDD00;}
.ss-canary-yellow{ background-color: #ffef00;}
.ss-harvest-gold{ background-color: #da9100;}
.ss-dark-black-grey{background-color: #2d2d2d; color: white;}

.ss-burst-blue{ background-color: #212E52;}
.ss-cetacean-blue{ background-color: #001440;}
.ss-midnight-blue{ background-color: #163057;}

.ss-forest-green{ background-color: #006E33;}
.ss-midnight-green{ background-color: #004C54;}
.ss-grass-green{ background-color: #009A17;}
.ss-xmas-green{ background-color: #00873E;}

.ss-justify {
    text-align: justify !important;
    text-justify: inter-word !important;
}

.ss-bold {
    font-weight: bold !important;
}

.ss-mongiya{
    
    background-color:rgb(235, 116, 5);
}



.ss-text-shadow2px {
    text-shadow: 2px 2px 2px black; 
} 

.ss-text-shadow5px {
    text-shadow: 1px 1px 5px black; 
} 
      
.ss-box-shadow5px {
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5); /* black shadow with 50% opacity */

}

.ss-box-shadow2px {
  box-shadow: 0px 11px 8px -10px rgba(156,67,67,0.75);
  -webkit-box-shadow: 0px 11px 8px -10px rgba(156,67,67,0.75);
  -moz-box-shadow: 0px 11px 8px -10px rgba(156,67,67,0.75);
}

.ss-text-shadow-multiple {
  text-shadow: .04em .04em 0 #fff,.08em .08em 0 #aaa;
  -webkit-text-shadow: .04em .04em 0 #fff, .08em .08em 0 #aaa;
}
@-webkit-keyframes font-effect-fire-animation-keyframes {
  0% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #FE0, 0.01em -0.05em 0.15em #FC0, 0.02em -0.15em 0.2em #F90, 0.04em -0.20em 0.3em #F70,0.05em -0.25em 0.4em #F70, 0.06em -0.2em 0.9em #F50, 0.1em -0.1em 1.0em #F40;
  }
  25% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0 -0.05em 0.17em #FE0, 0.04em -0.12em 0.22em #FC0, 0.04em -0.13em 0.27em #F90, 0.05em -0.23em 0.33em #F70, 0.07em -0.28em 0.47em #F70, 0.1em -0.3em 0.8em #F50, 0.1em -0.3em 0.9em #F40;
  }
  50% {    text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #FE0, 0.01em -0.05em 0.15em #FC0, 0.02em -0.15em 0.2em #F90, 0.04em -0.20em 0.3em #F70,0.05em -0.25em 0.4em #F70, 0.06em -0.2em 0.9em #F50, 0.1em -0.1em 1.0em #F40;
  }
  75% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0 -0.06em 0.18em #FE0, 0.05em -0.15em 0.23em #FC0, 0.05em -0.15em 0.3em #F90, 0.07em -0.25em 0.4em #F70, 0.09em -0.3em 0.5em #F70, 0.1em -0.3em 0.9em #F50, 0.1em -0.3em 1.0em #F40;
  }
  100% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #FE0, 0.01em -0.05em 0.15em #FC0, 0.02em -0.15em 0.2em #F90, 0.04em -0.20em 0.3em #F70,0.05em -0.25em 0.4em #F70, 0.06em -0.2em 0.9em #F50, 0.1em -0.1em 1.0em #F40;
  }
}

.ss-text-anaglyph {
  text-shadow: -0.06em 0 red, 0.06em 0 cyan;
}
.ss-text-fire-animation {
  -webkit-animation-duration:0.8s;
  -webkit-animation-name:font-effect-fire-animation-keyframes;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-direction:alternate;
  color: #ffe;
}
.ss-text-emboss {
  text-shadow: 0px 1px 1px #fff, 0 -1px 1px #000;
  color: #ddd;
}
.ss-text-3d {
  text-shadow: 0px 1px 0px #c7c8ca, 0px 2px 0px #b1b3b6, 0px 3px 0px #9d9fa2, 0px 4px 0px #8a8c8e, 0px 5px 0px #77787b, 0px 6px 0px #636466, 0px 7px 0px #4d4d4f, 0px 8px 7px #001135;
  color: #fff;
}
.ss-text-3d-float {
  text-shadow: 0 0.032em 0 #b0b0b0, 0px 0.15em 0.11em rgba(0,0,0,0.15), 0px 0.25em 0.021em rgba(0,0,0,0.1), 0px 0.32em 0.32em rgba(0,0,0,0.1);
  color: #fff;
}
.ss-text-outline {
    text-shadow:0 1px 5px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000;
    color: #fff;
}
.ss-text-fire {
  text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #FE0, 0.01em -0.05em 0.15em #FC0, 0.02em -0.15em 0.2em #F90, 0.04em -0.20em 0.3em #F70, 0.05em -0.25em 0.4em #F70, 0.06em -0.2em 0.9em #F50, 0.1em -0.1em 1.0em #F40;
  color: #ffe;
}

@keyframes flicker {
  0%   { opacity: 1; text-shadow: 0 0 5px #ff0, 0 0 10px #f00; }
  100% { opacity: 0.9; text-shadow: 0 0 10px #ff0, 0 0 20px #f00; }
}

.ss-text-emboss {
  color: #ccc;
  text-shadow:
    1px 1px 0 #fff,
   -1px -1px 0 #000;
}

.ss-text-anaglyph {
  color: white;
  text-shadow:
    -2px 0 red,
     2px 0 cyan;
}

.news-scroll {
  max-height: 650px;
  overflow-y: auto;
}

.news-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}


.news-scroll::-webkit-scrollbar {
  width: 5px;
}

.news-scroll::-webkit-scrollbar-thumb {
  background-color: #aaa;
  border-radius: 5px;
}

.news-scroll::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}


.noprint{ display:none !important;}
.onprint{ display:block !important; }

.ss-padding-small {padding: 3px 3px 3px 3px !important;}
.ss-padding {padding: 6px 6px 6px 6px !important;}
.ss-padding-large {padding: 8px 8px 8px 8px !important;}
.ss-padding-xlarge {padding: 10px 10px 10px 10px !important;}
.ss-padding-xxlarge {padding: 16px 16px 16px 16px !important;}
.ss-padding-xxxlarge {padding: 24px !important;}
.ss-bold { font-weight: bold !important;}


   .ss-title-bg{
      background: rgba(13, 178, 69, 1.0);
      background: linear-gradient(180deg, #038e4a, rgba(1, 125, 51, 1.0));
  }  

  .ss-title-bg0{
    background: #000512;
    background: linear-gradient(0deg,rgba(0, 5, 18, 1) 0%, rgba(82, 86, 204, 1) 96%, rgba(184, 184, 245, 1) 100%);
  }

  .logo_Green{
    background: #006633;
    background: linear-gradient(0deg,rgba(0, 102, 51, 1) 0%, rgba(0, 102, 51, 1) 40%, rgba(2, 150, 76, 1) 100%);

  }

  .logo_Green2{
    background: #02964C;
  }

  .logo_Orange{
    background: #E69603;
  }

  .logo_Orange1{
    background: #FEA003;
  }

  .text_Orange1{
    color: #FEA003;
  }

  .logo_Orange2{
    background: #FFBF00;
  }

  .active{
    background-color: #FEA003;
  }  

@keyframes slomo-shake {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  20% { transform: translate(-2px, 2px) rotate(-1deg); }
  40% { transform: translate(2px, -2px) rotate(1deg); }
  60% { transform: translate(-2px, -2px) rotate(-1deg); }
  80% { transform: translate(2px, 2px) rotate(1deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

.slomo-shake {
  display: inline-block;
  animation: slomo-shake 10s ease-in-out infinite;
  /*animation: slomo-shake 10s infinite;*/
}

.rainbow-line {
  height: 1px;
  width: 100%;
  /*background: linear-gradient(270deg, red, orange, yellow, green, blue, indigo, violet, red, red, orange);*/
  background: linear-gradient(270deg, black, yellow, darkblue, white, indigo, yellow, black, yellow, black);
  background-size: 500% 100%;
  animation: rainbow-move 10s linear infinite;
  overflow-x: hidden;
}

@keyframes rainbow-move {
  0% { background-position: 0% 0; }
  100% { background-position: 100% 0; }
} 


/* Floating Buttons */
.floating-btn {
    position: fixed;
    width: 55px;
    height: 55px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    cursor: pointer;
    border: none;
    outline: none;
    animation: float 3s ease-in-out infinite;
}

.floating-btn:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

.whatsapp {
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    z-index: 1001;
}

.top-btn {
    bottom: 110px;
    right: 30px;
    background: linear-gradient(135deg, #2b2d42, #4a4e69);
    color: #edf2f4;
    display: none;
}

.floating-btn .icon {
    width: 28px;
    height: 28px;
    transition: transform 0.3s ease;
}

.floating-btn:hover .icon {
    transform: scale(1.15);
}

.whatsapp:hover {
    background: linear-gradient(135deg, #2de26d, #139c84);
}

.top-btn:hover {
    background: linear-gradient(135deg, #3d405b, #5a6085);
}

/* Tooltip */
.tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1002;
}

.whatsapp .tooltip {
    bottom: calc(100% + 15px);
    right: 50%;
    transform: translateX(50%) translateY(10px);
}

.top-btn .tooltip {
    bottom: calc(100% + 15px);
    right: 50%;
    transform: translateX(50%) translateY(10px);
}

.floating-btn:hover .tooltip {
    opacity: 1;
    transform: translateX(50%) translateY(0);
}

/* Pulse Animation */
.pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: pulse-animation 2s infinite;
    z-index: -1;
    opacity: 0;
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse-animation {
    0% { transform: scale(1); opacity: 0.7; }
    70% { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .whatsapp {
        bottom: 20px;
        right: 20px;
    }
    .top-btn {
        bottom: 90px;
        right: 20px;
    }
}