html, body {
            font-family: 'Kanit', sans-serif;
            overflow-x: hidden;
            width: 100%;
        } 
	  .footer-link a {
		  color: white;
		  font-size: 1.2em;
		  font-weight: 300;
	  }
	  
	   a.footer-link:hover {
		  color: #ec4899;
		  text-decoration:underline; 
	  }
	  
	  header {
        position: fixed; 
        width: 100%;
        background: transparent;
        transition: all 0.3s ease;
        z-index: 1000;
      }

header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  background: white;
box-shadow: 0 1px 12px rgba(0, 1, 1, 0.1);
  transform: translateY(-100%);
  animation: slideDown 0.9s forwards;

}
	  
	  
header.sticky.hidden-up {
  animation: slideUp 0.9s forwards;
	
}


	  
	  /* Hide header offscreen without animation */
header.offscreen {
  transform: translateY(-100%);
  transition: none !important;
}

/* Animate it back in with transparent background */
header.slide-in-transparent {
  animation: slideDownTransparent 0.6s forwards;
}

/* Define the transparent slide down */
@keyframes slideDownTransparent {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}


@keyframes slideDown {
  to {
    transform: translateY(0);
  }
}
	  
	  @keyframes slideUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

.hamburger span {
  display: block;
  height: 6px;
  width: 55px;
  
  background: white;
  transition: background 0.3s ease;
}

header.sticky .hamburger span {
  background: black;
}

/* Add padding-top to main-content to prevent header overlap */
.main-content {
  padding-top: 0; /* No padding by default */
  position: relative;
}

/* blog search sticky */

.search-bar {
      padding-top: 5rem; 
    }
    
  
    .sticky-section {
      position: sticky;
      top: 5rem; /* Match navbar height */
      z-index: 40;
    }


	  
	 .loading-spinner {
  width: 48px;
  height: 48px;
  display: block;
  margin:15px auto;
  position: relative;
  color: #FFF;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loading-spinner::after,
.loading-spinner::before {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  transform: scale(0.5) translate(0, 0);
  background-color: #FFF;
  border-radius: 50%;
  animation: animloader 1s infinite ease-in-out;
}
.loading-spinner::before {
  background-color: #ec4899;
  transform: scale(0.5) translate(-48px, -48px);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
@keyframes animloader {
    50% {
      transform: scale(1) translate(-50%, -50%);
}
}
    
	  .video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Keep behind content */
}
	  .video-overlay {
  position: fixed; /* Covers entire screen */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 40; /* Ensure it's on top of all content */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease;
  opacity: 1;
  pointer-events: all;
}

body.video-loaded .video-overlay {
  opacity: 0;
  pointer-events: none;
}


    .hamburger span {
      transition: all 0.3s ease;
      display: block;
      height: 4px;
      background-color: white;
      border-radius: 0px;
    }

    .hamburger span:nth-child(1) {
      width: 100%;
    }

    .hamburger span:nth-child(2) {
      width: 66%;
    }

    .hamburger span:nth-child(3) {
      width: 50%;
    }

    .hamburger:hover span:nth-child(1) {
      width: 50%;
    }

    .hamburger:hover span:nth-child(2) {
      width: 66%;
    }

    .hamburger:hover span:nth-child(3) {
      width: 100%;
    }

    input[type="checkbox"]:checked ~ .hamburger span:nth-child(1) {
      width: 66%;
    }

    input[type="checkbox"]:checked ~ .hamburger span:nth-child(2) {
      width: 100%;
      background-color: #ec4899; /* pink-500 */
    }

    input[type="checkbox"]:checked ~ .hamburger span:nth-child(3) {
      width: 66%;
    }
	  #background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* Ensures the video is behind other content */
}
	
	  /* boxes */
 


	  
	 

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes boxEntry {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

	  /* countdown line for features */
.countdown-line-container {
  height: 100%;
  min-height: 100px;
}

.countdown-line {
  transition: transform 6s linear;
  transform-origin: top;
  transform: scaleY(1);
}

.feature-box.active .countdown-line {
  transform: scaleY(0);
}

/* Testimonials */
	  

	 .carousel-container {
  position: relative;

}

.carousel-items {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  min-height: 600px; 
}

@media (min-width: 768px) {
  .carousel-items {
    min-height: 200px;
  }
}
.carousel-items li {
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
  padding: 1rem;
  box-sizing: border-box;
}
	  .carousel-items strong {
		  font-weight: 400;
		  display: block;
		  margin-top: 20px;
		  font-style: normal;
	  }

.carousel-items li.active {
  opacity: 1;
}

.indicators {
  position: absolute;
  top: 90px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 10;
}

.indicator {
  width: 20px;
  height: 4px;
  background-color: #ec4899;
  border-radius: 0px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.indicator.active {
  width: 30px;
  background-color: #fff;
} 
	 
	.animate-invisible {
  opacity: 0;
  transform: translateY(4rem);
}
	

/* contact 7 syles */

.cf7-smart-form .cf7-input {
	font-size: 1.25rem;
  width: 100%;
  padding: 0.40rem 0.60rem;
box-shadow: 0 0 0 2px #f4f4f4; /* light gray */
 
  border-radius: 0.3rem;      /* rounded */
  color: #111827;             /* text-gray-900 */
  transition: all 0.2s ease-in-out;
}

.cf7-smart-form .cf7-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #ec4899; /* ring-pink-500 */
}

.cf7-smart-form .cf7-submit-button {
  background-color: #db2777; /* bg-pink-600 */
  color: #ffffff;
 padding: 0.75rem 0.75rem;
	width: 100%;
  border-radius: 0.3rem;
  font-weight: 300;
  transition: all 0.2s ease-in-out;
  border: none;
  cursor: pointer;
	font-size: 1.25rem;
}

.cf7-smart-form .cf7-submit-button:hover {
  background-color: #f73f91; /* bg-pink-500 */ 
}


/* logo scroller */ 

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--scroll-width));
  }
}

.animate-scroll {
  animation: scroll 20s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}


/* 3 cards */
 /* 3 cards */ .card-list { display: flex; } .card { height: 280px; width: 44%; min-width: 250px; padding: 2rem; border-radius: 0px; background: #fff; box-shadow: -2px -28px 18px rgba(0, 1, 1, 0.06); display: flex; flex-direction: column; transition: .2s; margin: 0; scroll-snap-align: start; clear: both; position: relative; color: #000; } .card:focus-within~.card, .card:hover~.card { transform: translateX(110px); } .card:hover { transform: translateY(-1rem); background-color:
#ec4899; color: #fff; } .card:not(:first-child) { margin-left: -120px; }


@media (max-width: 768px) {
	.card-list { display: block; } .card { height: 350px; width: 100%; min-width: 250px; padding: 3.5rem; border-radius: 0px; background: #fff; box-shadow: -2px -28px 18px rgba(0, 1, 1, 0.06); display: flex; flex-direction: column; transition: .2s; margin: 0; scroll-snap-align: start; clear: both; position: relative; color: #000; } .card:focus-within~.card, .card:hover~.card { transform: translateX(0px); }  .card:not(:first-child) { margin-left: -0px; }
}

/* basecamp */
.custom-marker li::marker {
    color: #3B82F6; 
	font-weight: 400;
	margin-right: 1em;
  }

/* Wrapper for WordPress content */
.wp-content {
font-weight: 300;
  color: black;
  line-height: 1.75;
  font-size: 1.2rem;
  max-width: 100%;
  word-break: break-word;
}

/* Headings */
.wp-content h1,
.wp-content h2,
.wp-content h3,
.wp-content h4,
.wp-content h5,
.wp-content h6 {
  font-weight: 400;
  margin: 1.5em 0 0.5em;
  line-height: 1.3;
  color: #111;
}

.wp-content h1 { font-size: 2em; }
.wp-content h2 { font-size: 1.75em; }
.wp-content h3 { font-size: 1.5em; }
.wp-content h4 { font-size: 1.25em; }
.wp-content h5 { font-size: 1.1em; }
.wp-content h6 { font-size: 1em; }

/* Paragraphs */
.wp-content p {
  margin-bottom: 1.25em;
}

/* Lists */
.wp-content ul,
.wp-content ol {
  margin: 1em 0 1em 1.5em;
  padding-left: 1em;
}

.wp-content ul {
  list-style-type: disc;
}

.wp-content ol {
  list-style-type: decimal;
}

.wp-content li {
  margin-bottom: 0.5em;
}

/* Blockquotes */
.wp-content blockquote {
  margin: 1.5em 0;
  padding: 0.75em 1.25em;
  border-left: 4px solid #ccc;
  background: #f9f9f9;
  font-style: italic;
  color: #666;
}

/* Images */
.wp-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5em 0;
}

/* Captions */
.wp-content .wp-caption {
  text-align: center;
  margin: 1.5em 0;
}

.wp-content .wp-caption img {
  margin: 0 auto;
}

.wp-content .wp-caption-text {
  font-size: 0.9em;
  color: #666;
}

/* Tables */
.wp-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5em;
}

.wp-content th,
.wp-content td {
  border: 1px solid #ddd;
  padding: 0.75em;
  text-align: left;
}

.wp-content th {
  background-color: #f3f3f3;
  font-weight: bold;
}

/* Links */
.wp-content a {
  color: #1a73e8;
  text-decoration: underline;
}

.wp-content a:hover {
  text-decoration: none;
}

.wp-content a.category {
  text-decoration: none;
	color: #ec4899;
	font-weight: 400;
	font-size: 1.2rem;
}

/* Code and Preformatted */
.wp-content code {
  background: #f3f3f3;
  padding: 0.2em 0.4em;
  font-family: monospace;
  border-radius: 4px;
}

.wp-content pre {
  background: #f3f3f3;
  padding: 1em;
  overflow-x: auto;
  font-family: monospace;
  border-radius: 4px;
  margin-bottom: 1.5em;
}

/* Horizontal Rule */
.wp-content hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 2em 0;
}

/* Alignments from the WP editor */
.wp-content .alignleft {
  float: left;
  margin-right: 1.5em;
}

.wp-content .alignright {
  float: right;
  margin-left: 1.5em;
}

.wp-content .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

  .basecamp-reg {
      max-width: 56rem;
  }

.md\:w-\[22\%\] {
    @media (width >= 48rem) {
      width: 20%;
    }
}
.page-numbers {
		font-family: 'Kanit', sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
    text-decoration: inherit;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-black);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.page-numbers:hover{
	color: var(--color-white);
	background-color: var(--color-pink-500);
}

nav.pagination{
	margin-top: 2em;
}


/* Default state: overlay hidden except the bottom 100px */
.team-card .overlay {
  transform: translateY(calc(100% - 100px));
  transition: transform 0.3s ease-in-out;
}

/* On hover (desktop) */
.team-card:hover .overlay {
  transform: translateY(0);
}

/* When toggled open (mobile via JS) */
.team-card.is-open .overlay {
  transform: translateY(0) !important;
}