/*
 Theme Name:   Theme TSI
 Theme URI:    https://tsidigitalsolution.my.id/theme-tsi
 Description:  A child theme for Parent Theme hello-elementor
 Author:       TSI Digital Solution
 Author URI:   https://tsidigitalsolution.my.id
 Template:     hello-elementor
 Version:      1.0.0
*/

/* Add your custom CSS below */
/***********************************************************************************FONT POPPINS****************************************************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

/***********************************************************************************Sizing Video Header Homepage************************************************************************************/

/*Apply the object-fit: cover; property, which ensures the video covers the background area properly*/
.elementor-background-video-hosted {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Makes sure the video covers the background properly */
}

/************************************************************************************Link URL********************************************************************************************************/

/* Default link color */
a {
    color: #45a6a7; 
    text-decoration: none; 
}

a:hover {
    color: #66FCF1;  
}

/************************************************************************************CSS H1**********************************************************************************************************/

/* Default H1 */
.shine {
  font-family: "Poppins";
  font-size: 3.8em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(102, 252, 241, 0.9) -webkit-gradient(
      linear,
      left top,
      right top,
      from(#000),
      to(#000),
      color-stop(0.5, #66FCF1)
    ) 0 0 no-repeat;
  background-image: -webkit-linear-gradient(
    -40deg,
    transparent 0%,
    transparent 40%,
    #fff 50%,
    transparent 60%,
    transparent 100%
  );
  -webkit-background-clip: text;
  -webkit-background-size: 220px;
  -webkit-animation: zezzz;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;

  /* Centering */
  display: flex; /* Enables flexbox */
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  text-align: center; /* Aligns the text itself */
  height: 100%; /* Ensure the container has height */
}

@-webkit-keyframes zezzz {
  0%,
  10% {
    background-position: -500px;
  }
  50% {
    background-position: top left;
  }
  100% {
    background-position: 500px;
  }
}

@media (max-width: 1024px) {
 .shine {
  font-size: 3em;
  }
}

@media (max-width: 767px) {
  .shine {
  font-size: 2.6em;
  }
}

/************************************************************************************CSS H2**********************************************************************************************************/

/* Default H1 */

.h2 {
  text-shadow: #1a1919 1px 1px 0;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.5px;
  font-size: 2.2em;
  color: #000;
  font-weight: 200;
  text-align: center;
}

.h2::first-letter {
  font-family: "Poppins", sans-serif;
  font-size: 1.8em; /* First letter size */
  font-weight: 300;
  display: inline-block; /* Ensures the first letter is treated like a block element */
  margin-right: 0em; /* Space between the first letter and the rest of the text */
  line-height: 1.2; /* Adjusted line height to align better with the rest of the text */
  vertical-align: baseline; /* Aligns it with the baseline */
  color: #000;
  text-shadow: 
    1px -1px 0 #767676, 
    -1px 2px 1px #737272, 
    -2px 4px 1px #767474, 
    -3px 6px 1px #787777, 
    -4px 8px 1px #7b7a7a, 
    -5px 10px 1px #7f7d7d, 
    -6px 12px 1px #828181, 
    -7px 14px 1px #868585, 
    -8px 16px 1px #8b8a89, 
    -9px 18px 1px #8f8e8d, 
    -10px 20px 1px #949392, 
    -11px 22px 1px #999897, 
    -12px 24px 1px #9e9c9c, 
    -13px 26px 1px #a3a1a1, 
    -14px 28px 1px #a8a6a6, 
    -15px 30px 1px #adabab, 
    -16px 32px 1px #b2b1b0
}

@media (max-width: 787px) {
  .h2 {
    font-size: 1.5em; /* Resize the paragraph text */
    line-height: 1;
  }

  .h2::first-letter {
    font-size: 1.8em; /* Resize the first letter */
    line-height: 0.8; /* Adjust the line height for the first letter */
  }
}

@media (max-width: 330px) {
  .h2 {
    font-size: 1.5em; /* Resize the paragraph text further */
    line-height: 0.7;
  }

  .h2::first-letter {
    font-size: 1.5em; /* Resize the first letter further */
    line-height: 0.5; /* Adjust the line height for the first letter */
  }
}

/************************************************************************************FAQ Button*******************************************************************************************************/

/* Default FAQ Button */

.faq-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  font-family: "Poppins";
  font-size: 14px;
  background-color: #000000;
  background-image: linear-gradient(147deg, #0f0f0f 0%, #000000 74%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  position: relative;
}
.faq-button svg {
  height: 1.5em;
  fill: white;
}
.faq-button:hover svg {
  animation: jello-vertical 0.7s both;
}
@keyframes jello-vertical {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

.tooltip {
  position: absolute;
  top: -50px;
  opacity: 0;
  background-color: #000000;
  background-image: linear-gradient(147deg, #0f0f0f 0%, #000000 74%);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 0.2s;
  pointer-events: none;
  letter-spacing: 0.3px;
}

.tooltip::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  background-color: #000000;
  background-size: 100%;
  background-position: center;
  transform: rotate(45deg);
  bottom: -15%;
  transition-duration: 0.3s;
}

.faq-button:hover .tooltip {
  top: -50px;
  opacity: 1;
  transition-duration: 0.3s;
}

/* Responsive Design */
@media (max-width: 1024px) {
   .tooltip {
  font-size: 12px;
  }
}

@media (max-width: 767px) {
  .tooltip {
  font-size: 12px;
  }
}

/************************************************************************************Shiny-cta Button************************************************************************************************/

/* Default Shiny-cta Button */
:root {
  --shiny-cta-bg: #000000!important;
  --shiny-cta-bg-subtle: #66FCF1!important;
  --shiny-cta-fg: #ffffff!important;
  --shiny-cta-highlight: #66FCF1!important;
  --shiny-cta-highlight-subtle: #66FCF1!important;
}

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}

@property --gradient-shine {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

.shiny-cta {
  --animation: gradient-angle linear infinite;
  --duration: 3s;
  --shadow-size: 2px;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  padding: 1.25rem 2.5rem;
  font-family: inherit;
  font-size: 1.125rem;
  line-height: 1.2;
  border: 1px solid transparent!important;
  border-radius: 360px;
  color: var(--shiny-cta-fg)!important;
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg))
      padding-box,
    conic-gradient(
        from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
        transparent,
        var(--shiny-cta-highlight) var(--gradient-percent),
        var(--gradient-shine) calc(var(--gradient-percent) * 2),
        var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
        transparent calc(var(--gradient-percent) * 4)
      )
      border-box!important;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle)!important;

  &::before,
  &::after,
  span::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    z-index: -1;
  }

  &:active {
    translate: 0 1px;
  }
}

/* Dots pattern */
.shiny-cta::before {
  --size: calc(100% - var(--shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
      circle at var(--position) var(--position),
      white calc(var(--position) / 4),
      transparent 0
    )
    padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 20% 90%,
    black
  );
  border-radius: inherit;
  opacity: 0.5;
  z-index: -1;
}

/* Inner shimmer */
.shiny-cta::after {
  --animation: shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(
    -50deg,
    transparent,
    var(--shiny-cta-highlight),
    transparent
  );
  mask-image: radial-gradient(circle at bottom, transparent 30%, black);
  opacity: 0.6;
}

.shiny-cta span {
  z-index: 1;

  &::before {
    --size: calc(100% + 1rem);
    width: var(--size);
    height: var(--size);
    box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
    opacity: 0;
  }
}

/* Animate */
.shiny-cta {
  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
  transition: var(--transition);
  transition-property: --gradient-angle-offset, --gradient-percent,
    --gradient-shine;

  &,
  &::before,
  &::after {
    animation: var(--animation) var(--duration),
      var(--animation) calc(var(--duration) / 0.4) reverse paused;
    animation-composition: add;
  }

  span::before {
    transition: opacity var(--transition);
    animation: calc(var(--duration) * 1.5) breathe linear infinite;
  }
}

.shiny-cta:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-cta-highlight-subtle);

  &,
  &::before,
  &::after {
    animation-play-state: running;
  }

  span::before {
    opacity: 1;
  }
}

@keyframes gradient-angle {
  to {
    --gradient-angle: 360deg;
  }
}

@keyframes shimmer {
  to {
    rotate: 360deg;
  }
}

@keyframes breathe {
  from,
  to {
    scale: 1;
  }
  50% {
    scale: 1.2;
  }
}

@media (max-width: 1140px) {
  .shiny-cta {
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg))!important
  }
}

@media (max-width: 787px) {
  .shiny-cta{
 background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg))!important
  }
}

/************************************************************************************Toggle Element**********************************************************************************************/
/* Toggle Elements */
.toggleElem a, .toggleElem svg, .toggleElem i, .toggleClose a, .toggleClose i, .toggleClose img {
    cursor: pointer;
    transition: transform 0.34s ease;
}

/* Active State */
.toggleIsActive i, .toggleIsActive svg {
    transform: rotate(90deg);
}

/* Content Container */
.toggleContent.e-con {
    min-height: initial;
}
.toggleContent > .e-con-inner {
    min-height: var(--min-height);
}

/************************************************************************************YouTube****************************************************************************************************/
/* General styles for youtube videos */
.youtube-facade {
    position: relative;
    display: inline-block;
    cursor: pointer;  /* Ensures the cursor changes to pointer when hovering */
    width: 100%; /* Set this to your desired width */
    max-width: 560px; /* Adjust as needed */
    aspect-ratio: auto; /* Maintain video aspect ratio */
    background-color: #000000;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.youtube-facade:hover {
    transform: scale(1.02); /* Slight zoom effect on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow on hover */
}

.youtube-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(102, 252, 241, 0.8);
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
    cursor: pointer;  /* Ensures the cursor changes to pointer when hovering */
}

.youtube-facade:hover .play-button {
    background: rgba(102, 252, 241, 1); /* Intensify the background color on hover */
    transform: translate(-50%, -50%) scale(1.1); /* Slightly enlarge the play button */
}

.play-button::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 20px solid #000; /* Change to your desired color */
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    display: block;
}


/************************************************************************************Images Header****************************************************************************************************/

/* General styles for the header image*/
header {
    width: 100%;
    height: 100vh; /* Full viewport height */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Specific styles for each page slug */ 
.page-about header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/03/achievement-agreement-arms-bump-business-cheer-up-1433619-pxhere.com_.webp');
}

.page-our-publications header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/03/tinywow_pexels-tara-winstead-6479551_36103661-scaled.webp');
}

.page-contact header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/03/africa-african-african-american-african-descent-agenda-american-1437383-pxhere.com_.webp');
}

.page-copywriting header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/04/Copywriting-TSI-Header-scaled-1.webp');
}

.page-e-commerce header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/03/tinywow_pexels-negative-design-1447299_36114966-scaled.webp');
}

.page-home header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/05/Icon-TSI.webp');
}

.page-graphic-design header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/08/Graphic-Design-scaled.webp');
}

.page-login header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/03/tinywow_pexels-skyler-ewing-6131869_36104190-scaled.webp');
}

.page-online-quote-copywriting-amp-translations header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/10/Quote-Copywriting-Translations-scaled.webp');
}

.page-online-quote-ecommerce header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/10/e-Commerce-scaled-e1728452459534.webp');
}

.page-online-quote-graphic-design header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/10/Quote-Graphic-Design-scaled-e1728452200545.webp');
}

.page-online-quote-photo-amp-videography header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/10/PHOTO-VIDEOGRAPHY-10.webp');
}

.page-online-quote-social-media header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/10/Quote-Social-Media.webp');
}

.page-online-quote-technical header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/10/Quote-Technical-scaled.webp');
}

.page-online-quote-websites header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/10/Benefits-of-website-redesign-scaled.webp');
}

.page-overview-quotation header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/03/Request-quotation-TSI-Digital-Solution-scaled.webp');
}

.page-photo-videography header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/04/Photo-Videography-header-scaled-1.webp');
}

.page-projects header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/03/achievement-agreement-arms-bump-business-cheerful-1456477-pxhere.com_.webp');
}

.page-services header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/03/laptop-computer-writing-working-table-person-764428-pxhere.com_.webp');
}

.page-social-media-management header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/04/smartphone-hand-man-technology-phone-telephone-660056-pxhere.com_.webp');
}

.page-technical header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/04/Technical-Header-scaled-1.webp');
}

.page-websites header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/08/Websites-scaled.webp');
}
.page-app-design-development header {
    background-image: url('https://tsidigitalsolution.my.id/wp-content/uploads/2026/01/App-Design-Development-scaled.webp');
}
.page-tsi-visitor-blocker header {
    background-image: url('https://tsidigitalsolution.my.id/wp-content/uploads/2026/01/Spam.webp');
}

/************************************************************************************BLOG Header******************************************************************************************/

.page-serialized-social-media-content-the-smart-way-brands-build-attention-over-time header {
    background-image: url('https://tsidigitalsolution.my.id/wp-content/uploads/2026/02/Serialized-Social-Media-Content-scaled.webp');
}
.page-how-to-build-an-seo-and-chatbot-optimized-blog-that-actually-drives-business header {
    background-image: url('https://tsidigitalsolution.my.id/wp-content/uploads/2026/02/SEO-optimized-blog-scaled.webp');
}
.page-what-is-an-ai-agent header {
    background-image: url('https://tsidigitalsolution.my.id/wp-content/uploads/2026/01/AI-Agent.webp');
}
.page-why-businesses-are-panicking-about-ai-search-traffic-loss header {
    background-image: url('https://tsidigitalsolution.my.id/wp-content/uploads/2026/01/AI-search-traffic-loss.webp');
}
.page-ai-fatigue-is-breaking-social-media-trust header {
    background-image: url('https://tsidigitalsolution.my.id/wp-content/uploads/2026/01/AI-fatigue-on-social-media.webp');
}
.page-why-you-still-need-a-website-even-if-social-media-is-working-for-your-business header {
    background-image: url('https://tsidigitalsolution.my.id/wp-content/uploads/2026/01/Business-Website.webp');
}
.page-your-digital-marketing-ecosystem-explained-build-the-machine-that-builds-your-business header {
    background-image: url('https://tsidigitalsolution.my.id/wp-content/uploads/2025/12/Digital-Marketing-Ecosystem.webp');
}
.page-the-unbreakable-pillars-of-a-modern-digital-marketing-strategy header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/12/Digital-Marketing-Strategy.webp');
}
.page-wordpress-plugins-vs-custom-code-do-you-really-need-pro-versions-if-you-can-code header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/12/WordPress-plugins.webp');
}
.page-digital-marketing-trends-for-2026-whats-going-to-explode-and-what-to-watch-out-for header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/12/2026-digital-marketing-trends.webp');
}
.page-mobile-app-development-how-apps-work-why-they-matter-and-whats-next header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/12/mobile-app-development.webp');
}
.page-customer-outreach-strategy-turn-curious-shoppers-into-loyal-clients header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/11/customer-outreach-strategy.webp');
}
.page-ai-overviews-in-search-impressions-up-click-through-rates-down header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/11/AI-Overviews.webp');
}
.page-mastering-answer-engine-optimization-aeo header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/11/Answer-Engine-Optimization.webp');
}
.page-how-to-develop-a-vibe-instead-of-chasing-trends header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/11/brand-identity-on-social-media-scaled.webp');
}
.page-10-underrated-social-media-metrics-that-could-change-everything-for-your-brand header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/10/underrated-social-media-metrics.webp');
}
.page-what-is-website-caching-how-it-impacts-your-sites-performance header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/10/Website-Caching.webp');
}
.page-what-is-graphic-design-mastering-the-4-crap-principles header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/10/Graphic-Design-Principles-scaled.webp');
}
.page-crucial-information-needed-before-building-a-website header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/10/Crucial-Information-Needed-Before-Building-a-Website-scaled.webp');
}
.page-changing-host-and-the-impact-on-seo header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/09/Changing-host-SEO.webp');
}
.page-how-digital-marketing-can-help-your-business-grow header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/09/Digital-marketing-can-help-your-business.webp');
}
.page-short-form-video-content-how-brands-win-attention-trust-conversions header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/09/Short-Form-Video-Content.webp');
}
.page-ai-avatars-digital-twins-transforming-marketing-and-service header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/09/AI-Avatars.webp');
}
.page-the-ai-implosion-why-human-data-could-decide-its-future header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/08/Human-Made-Websites-vs-AI-Websites-Why-Original-Design-Still-Wins-scaled.webp');
}
.page-the-ai-implosion-why-human-data-could-decide-its-future header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/08/The-AI-Implosion-scaled.webp');
}
.page-building-a-brand-identity-that-converts header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/08/brand-identity.webp');
}
.page-chatbot-search-how-to-win-the-new-battle-for-online-visibility header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/08/Chatbot-Search.webp');
}
.page-digital-agency-growth header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/08/Digital-Agency-Growth-scaled.webp');
}
.page-online-scam-detection header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/07/Online-Scam-Detection.webp');
}
.page-unveiling-ai-privacy-concerns header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/07/AI-Privacy-Concerns.webp');
}
.page-10-must-have-digital-marketing-tools-in-order-of-priority-for-your-business header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/07/10-Must-Have-Digital-Marketing-Tools-in-Order-of-Priority-for-Your-Business.webp');
}
.page-why-clear-responsibilities-drive-success header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/07/marketing-agency-roles-scaled.webp');
}
.page-beware-the-template-trap-risks-remedies-in-web-development header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/07/web-development-templates-scaled.webp');
}
.page-choose-the-right-ai-evolution-strategy header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/06/AI-evolution-strategy.webp');
}
.page-the-geo-revolution-how-ai-answers-hyper-local-intent-and-e-e-a-t-are-rewriting-search header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/06/Generative-Engine-Optimization-scaled.webp');
}
.page-content-quality-why-ai-generated-content-risks-are-real header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/06/Content-Quality-scaled.webp');
}
.page-ai-generated-websites header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/06/AI-generated-websites.webp');
}
.page-website-user-experience-that-converts header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/06/Website-user-experience-scaled.webp');
}
.page-the-hidden-power-behind-successful-websites header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/05/PageSpeed-Optimization-F1.webp');
}
.page-voice-search-optimization-speak-your-way-to-more-conversions header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/05/Voice-Search-Optimization-scaled.webp');
}
.page-maximize-conversions-with-white-space-optimization header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/05/white-space-optimization-1.webp');
}
.page-the-rise-of-social-media-as-a-search-engine header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/05/social-media-search-engine.webp');
}
.page-the-of-an-affiliate-marketing-program header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/04/Affiliate-Program-TSI-Digital-Solution.webp');
}
.page-client-communication-in-digital-marketing header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/04/Communication.webp');
}
.page-ai-optimized-content-strategy header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/04/AI‑Optimized-Content-Strategy-scaled.webp');
}
.page-mobile-digital-marketing-a-revolution-we-hold-in-our-hands header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/04/Mobile-Digital-Marketing-scaled.webp');
}
.page-mastering-building-ai-agent header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/04/Mastering-Building-AI-Agent.webp');
}
.page-seo-is-outdated-embrace-chatbot-driven-search header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/03/SEO-is-Outdated-Embrace-Chatbot-Driven-Search-scaled.webp');
}
.page-ota-social-media-mastery header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/03/OTA-Social-Media-Mastery-scaled.webp');
}
.page-the-search-engine-revolution header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/03/The-Search-Engine-Revolution-scaled.webp');
}
.page-diy-website-courses header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/03/DIY-Website-Courses-scaled.webp');
}
.page-mastering-color-palette-rules header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/02/Color-Palette-Rules-scaled.webp');
}
.page-the-anatomy-of-a-perfect-website header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/02/The-Anatomy-of-a-Perfect-Website-scaled.webp');
}
.page-google-my-business-gmb-the-underrated-goldmine header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/02/Google-My-Business-GMB-–-The-Underrated-Goldmine-scaled.webp');
}
.page-the-untapped-power-of-social-media header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/02/The-Untapped-Power-of-Social-Media-scaled.webp');
}
.page-your-path-to-mobile-marketing-success header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/01/Your-Path-to-Mobile-Marketing-Success-scaled.webp');
}
.page-lease-your-website-till-its-yours header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/05/TSI-Digital-Solution-Lease-your-website-till-its-yours-scaled.webp');
}
.page-benefits-of-having-an-animated-3d-logo header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/05/animated-3d-logo-with-tsi-scaled.webp');
}
.page-the-future-of-ai header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/05/ai.webp');
}
.page-seo-unlocking-the-power header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/06/seo-unlocking-the-power-scaled.webp');
}
.page-ads-vs-seo header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/06/ads-vs-seo-which-is-best-for-your-business-scaled.webp');
}
.page-marketing-versus-branding header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/06/marketing-versus-branding-scaled.webp');
}
.page-new-ways-of-working-nwow header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/06/new-ways-of-working-scaled.webp');
}
.page-comparing-e-commerce-platforms-header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/06/woocommerce-by-tsi-digital-solution-scaled.webp');
}
.page-social-media-manager-navigating-the-social-media-jungle header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/07/social-media-management-tsi-digital-solution-scaled.webp');
}
.page-the-power-of-a-digital-footprint header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/07/digital-footprint-by-tsi-digital-solution-scaled.webp');
}
.page-steps-to-develop-a-responsive-website-header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/07/steps-to-develop-a-responsive-website-scaled.webp');
}
.page-the-most-asked-questions-about-ai header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/07/artificial-intelligence-by-tsi-digital-solution-scaled.webp');
}
.page-how-to-start-with-digital-marketing-header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/08/how-to-start-with-digital-marketing-a-beginners-guide-by-tsi-digital-solution-scaled.webp');
}
.page-celebrating-two-years-of-tsi-digital-solution header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/08/celebrating-two-years-of-tsi-digital-solution-scaled.webp');
}
.page-why-outsourcing-your-social-media-management header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/08/outsourcing-social-media-management-to-tsi-digital-solution-scaled.webp');
}
.page-copywriting-in-digital-marketing header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/08/Copywriting-scaled.webp');
}
.page-the-power-of-google-and-social-media-ads header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/08/the-power-of-google-and-social-media-ads-scaled.webp');
}
.page-unveiling-the-power-of-heatmaps header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/08/the-power-of-heatmaps-by-tsi-digital-solution-scaled.webp');
}
.page-what-is-html header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/08/html-scaled.webp');
}
.page-what-is-css header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/08/css.webp');
}
.page-technical-precision-in-copywriting-translation header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/08/technical-precision-in-copywriting-translation-scaled.webp');
}
.page-responsive-web-design header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/08/responsive-web-design.webp');
}
.page-copywriting-in-digital-marketing header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/08/copywriting-scaled.webp');
}
.page-understanding-backlinks header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/09/backlinks-scaled.webp');
}
.page-why-woocommerce-is-the-best-e-commerce-solution-for-your-business-header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/09/shop-woocommerce-scaled.webp');
}
.page-different-types-of-logos header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/09/types-of-logos.webp');
}
.page-how-important-is-mobile-marketing-in-digital-marketing header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/09/how-important-is-mobile-marketing-in-digital-marketing-scaled.webp');
}
.page-the-complete-guide-to-landing-pages header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/09/landing-page-by-tsi-digital-solution.webp');
}
.page-the-top-20-most-asked-questions-in-digital-marketing-header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/09/top-20-most-asked-questions-in-digital-marketing-scaled.webp');
}
.page-how-can-graphic-design-contribute-to-seo header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/09/how-can-graphic-design-contribute-to-seo-scaled.webp');
}
.page-google-my-business header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/09/google-my-business-scaled.webp');
}
.page-why-redesigning-your-website-is-key-to-success-in-digital-marketing header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/09/benefits-of-website-redesign-scaled.jpg');
}
.page-speeding-up-websites header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/09/speeding-up-websites-scaled.webp');
}
.page-multiple-domains-vs-redirecting-domains header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/10/multiple-domains-vs-redirecting-domains-scaled.webp');
}
.page-how-to-increase-organic-reach-on-social-media header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/10/how-to-increase-organic-reach-on-social-media-scaled.webp');
}
.page-mastering-digital-marketing-funnels header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/10/mastering-digital-marketing-funnels-scaled.webp');
}
.page-digital-marketing-trends-2025 header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/11/digital-marketing-trends-2025-scaled.webp');
}
.page-the-human-side-of-social-media header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/11/the-human-side-of-social-media-scaled.webp');
}
.page-neural-response-mapping header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/11/neural-response-mapping-scaled.webp');
}
.page-rethinking-social-media-management header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/11/rethinking-social-media-management-scaled.webp');
}
.page-media-optimization header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/11/media-optimization.webp');
}
.page-the-ai-website-trap header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/12/the-ai-website-trap-scaled.webp');
}
.page-responsiveness header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/12/responsiveness-scaled.webp');
}
.page-website-hosting header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/12/website-hosting-scaled.webp');
}
.page-thank-you-2024 header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/12/thank-you-from-tsi-digital-solution.webp');
}
.page-your-website-your-digital-id-card header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/01/digital-id-card-scaled.webp');
}
.page-landing-page-vs-homepage header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2025/01/landing-page-vs-homepage-scaled.webp');
}
.page-tsi-digital-solutions-starterkit header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/03/tinywow-pexels-negative-space-34578-36108855-scaled.webp');
}
.page-social-media-management-a-digital-marketing-agencys-secret-weapon header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/03/tinywow-pexels-paul-kerby-genil-3111692-36108181-1-scaled.webp');
}
.page-graphic-designs-for-effective-digital-marketing header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/03/tinywow-pexels-pixabay-104827-36108180-1-scaled.webp');
}
.page-demystifying-digital-marketing-social-media header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/03/the-7-Cs-of-digital-marketing-scaled.webp');
}

.page-what-is-digital-marketing header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/04/What-is-Digital-Marketing-scaled.webp');
}

.page-pros-and-cons-of-developing-a-website-in-figma header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/03/Figma.webp');
}

.page-pros-and-cons-of-developing-a-website-in-wordpress header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/08/WordPress.webp');
}

.page-pros-and-cons-of-developing-a-website-in-wix header {
    background-image: url('https://new-tsi.tsidigitalsolution.my.id/wp-content/uploads/2024/08/Wix-1.webp');
}

/* Optional: Add smooth transition for background images */ 
header {
    transition: background-image 0.5s ease-in-out;
}

/************************************************************************************Butterfly****************************************************************************************************/

/* General styles for the butterfly*/

.loader36 {
  --sizeLoader: 60px;
  --sizeLoaderHalf: calc(var(--sizeLoader) / 2);
  --stepBtf: calc(var(--sizeLoader) / 10);
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: var(--sizeLoader);
  height: var(--sizeLoader);
}

.loader36:hover {
  cursor: progress;
}

.loader36[anim1] {
  animation: anim136 0.3s alternate ease-in-out infinite;
}

.loader36:not([anim1]) {
  right: var(--sizeLoaderHalf);
  transform-origin: center right;
  animation: moveAround36 2s linear infinite;
}

.loader36[showShadow] {
  filter: drop-shadow(0 10px 10px #060606de);
}

.loader36 svg:nth-child(1) {
  position: relative;
  height: 100%;
  left: 2%;
  transform-origin: center right;
  animation: wing36 0.5s ease-in-out infinite;
}

.loader36 svg:nth-child(2) {
  height: 50%;
}

.loader36 svg:nth-child(3) {
  position: relative;
  height: 100%;
  left: -2%;
  transform-origin: center left;
  animation: wing36 0.5s ease-in-out infinite;
}

@keyframes wing36 {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(60deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}

@keyframes moveAround36 {
  0% {
    transform: rotate(0deg);
  }

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

@keyframes anim136 {
  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(var(--stepBtf));
  }
}

/* @media (prefers-color-scheme: dark) {
  .loader[showShadow]{
    filter: drop-shadow(0 10px 10px #dbdbdbde);
  }
} */

/**************************************************************************************Dropdown bottom page**********************************************************************************************/
/* Parent container: use flexbox to center children vertically and horizontally */
        .parent-container2 {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: auto;
        }

        /* Hide the toggle input */
        .toggle-input2 {
            display: none;
        }

        /* Toggle Button Container: Centered */
        .toggle-container2 {
            margin-bottom: 0.5rem;  /* Adds space between the toggle and dropdown */
        }

        /* Toggle Button Styling */
        .toggle2 .bars2 {
            position: relative;
            width: auto;
            height: 40px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition-duration: 0.3s;
        }

        .bars2 {
            transition: transform 0.3s, opacity 0.3s;
            position: relative;
           width: auto; 
           font-family: "Poppins",Sans-Serif;
           font-size: 18px;
        }

        /* Bar positions */
        #bartext { top: 10px;
        align-items: center;
        justify-content: center;
        }

        /* Transform bars into an "X" */
        .toggle-input2:checked + .toggle-container2 .toggle2 #bartext {
            width: 300px;
            height: 30px;
            background-color: #66FCF1;
            border-radius: 5px;
            opacity: 1;
}

        /* Menu Container (Dropdown) Styling */
        .menu-container2 {
            --main-color: #fff;
            --main-color-opacity: #66FCF1;
            --total-radio: 4;
            
            display: flex;
            flex-direction: column;
            position: relative;
            padding-left: 0.5rem;
            
            /* Initially hide with fade/expand effect */
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transition: opacity 0.5s ease, max-height 0.5s ease;
        }

        /* Show the menu when toggle is checked */
        .toggle-input2:checked ~ .menu-container2 {
            opacity: 1;
            max-height: 500px; /* Adjust as needed for content */
        }

        /* The rest of your menu design CSS */
        .menu-container2 input {
            cursor: pointer;
            appearance: none;
        }

        .menu-container2 .glider-container2 {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            background: linear-gradient(0deg, rgba(255, 255, 255,1) 0%, rgba(102, 252, 241, 1) 50%, rgba(255, 255, 255,1) 100%);
            width: 1px;
        }

        .menu-container2 .glider-container2 .glider2 {
            position: relative;
            height: calc(100% / var(--total-radio));
            width: 100%;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, var(--main-color) 50%, rgba(0, 0, 0, 0) 100%);
            transition: transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56);
        }

        .menu-container2 label {
            cursor: pointer;
            padding: 0.5rem;
            position: relative;
            color: #08000;
            transition: all 0.3s ease-in-out;
        }

        .menu-container2 input:checked + label {
            color: var(--main-color);
        }

/********************************************************************************Card with Title and Photo Hover****************************************************************************************************/
.card-container1 {
  width: 250px;
  height: 280px;
  position: relative;
  border-radius: 10px;
}

.card-container1::before {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #0f0f0f 0%, #000000 100% );
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(20px);
}

.card-container2 {
  width: 330px;
  height: 220px;
  position: relative;
  border-radius: 10px;
}

.card-container2::before {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #0f0f0f 0%, #000000 100% );
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(20px);
}

.card1 {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  position: relative; /* Added to establish positioning context */
}

.card1 .img-content1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(-45deg, #0f0f0f 0%, #000000 100% );
  transition: scale 0.6s, rotate 0.6s, filter 1s;
  position: relative; /* Added for title positioning */
}

.card1 .img-content1 img {
  width: 100%;
  height: 100%;
  fill: #0f0f0f;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

/* Title on image - visible by default */
.image-title {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Poppins;
  color: white;
  font-size: 32px;
  font-weight: 500;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);
  z-index: 0; /* Above the image */
  transition: opacity 0.4s ease;
  opacity: 1; /* Visible by default */
  pointer-events: none; /* Don't interfere with hover */
  text-align: center;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Content1 - hidden by default, appears on hover */
.card1 .content1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0px;
  color: #e8e8e8;
  padding: 20px 24px;
  line-height: 1.2;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(50px);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
  z-index: 1; /* HIGHER than image and image-title */
  background: rgba(0, 0, 0, 0.7); /* Optional: add background for readability */
}

.card1 .content1 .heading1 {
  font-size: 32px;
  font-weight: 700;
}

/* HOVER STATES */

/* Hide image title on hover */
.card1:hover .image-title {
  opacity: 0;
}

/* Show content1 on hover - ON TOP of everything */
.card1:hover .content1 {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* Allow interaction with content if needed */
}

.card1:hover .img-content1 {
  scale: 2.5;
  rotate: 30deg;
  filter: blur(15px);
}

.card1:hover .img-content1 img {
  fill: rgba(0,0,0,0.9);
}

@media (max-width: 787px) {
  .card1 .content1{
    width: 250px;
    font-size: 1em;
    line-height: 1;
    padding: 15px; /* Adjusted for mobile */
  }
  
  .card1 {
    width: 240px;
  }
  
  .image-title {
    font-size: 24px; /* Smaller on mobile */
  }
}

@media (max-width: 787px) {
  .card1 .content1{
    width: 100%;
    font-size: 1em;
    line-height: 1;
    padding: 15px;
  }
  
  .card1 {
    width: 100%;
  }
  
  .image-title {
    font-size: 24px;
  }
}
/****************************************************************************Handphone1 card SMM********************************************************************************************************/
/* Card 1 - Blue Gradient Theme */
.cardhp1 {
  width: 250px;
  height: 400px;
  background: black;
  border-radius: 35px;
  border: 2px solid rgb(40, 40, 40);
  padding: 7px;
  position: relative;
  box-shadow: 2px 5px 15px #ffffff;
}

.cardhp1-inner {
  background-image: linear-gradient(to right bottom, #020024 0%, #090979 15%, #00d4ff 35%, #66FCF1 50%, #090979 75%, #020024 100%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  height: 100%;
  border-radius: 25px;
  transition: all 0.6s ease-out;
  overflow: hidden;
}

.cardhp1:hover .cardhp1-inner {
  background-position: 100% 100%;
}

/* Card 2 - Red/Purple Gradient Theme */
.cardhp2 {
  width: 250px;
  height: 400px;
  background: black;
  border-radius: 35px;
  border: 2px solid rgb(40, 40, 40);
  padding: 7px;
  position: relative;
  box-shadow: 2px 5px 15px #ffffff;
}

.cardhp2-inner {
  background-image: linear-gradient(to right bottom, #ff0000 5%, #5746cf 35%, #004ac2 50%, #003d94 75%, #66FCF1 100%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  height: 100%;
  border-radius: 25px;
  transition: all 0.6s ease-out;
  overflow: hidden;
}

.cardhp2:hover .cardhp2-inner {
  background-position: 100% 100%;
}

/* Shared Styles (applied to both cards) */
.cardhp1 .top, .cardhp2 .top {
  position: absolute;
  top: 0px;
  right: 50%;
  transform: translate(50%, 0%);
  width: 35%;
  height: 18px;
  background-color: black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.cardhp1 .speaker, .cardhp2 .speaker {
  position: absolute;
  top: 2px;
  right: 50%;
  transform: translate(50%, 0%);
  width: 40%;
  height: 2px;
  border-radius: 2px;
  background-color: #66FCF1;
}

.cardhp1 .camera, .cardhp2 .camera {
  position: absolute;
  top: 6px;
  right: 84%;
  transform: translate(50%, 0%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #66FCF1;
}

.cardhp1 .inner-dot, .cardhp2 .inner-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  background-color: #66FCF1;
}

.cardhp1 .btn1, .cardhp1 .btn2, .cardhp1 .btn3, .cardhp1 .btn4,
.cardhp2 .btn1, .cardhp2 .btn2, .cardhp2 .btn3, .cardhp2 .btn4 {
  position: absolute;
  width: 2px;
}

.cardhp1 .btn1, .cardhp1 .btn2, .cardhp1 .btn3,
.cardhp2 .btn1, .cardhp2 .btn2, .cardhp2 .btn3 {
  height: 45px;
  top: 30%;
  right: -4px;
  background-image: linear-gradient(to right, #111111, #222222, #333333, #464646, #595959);
}

.cardhp1 .btn2, .cardhp1 .btn3,
.cardhp2 .btn2, .cardhp2 .btn3 {
  transform: scale(-1);
  left: -4px;
}

.cardhp1 .btn2, .cardhp1 .btn3,
.cardhp2 .btn2, .cardhp2 .btn3 {
  transform: scale(-1);
  height: 30px;
}

.cardhp1 .btn2, .cardhp2 .btn2 {
  top: 26%;
}

.cardhp1 .btn3, .cardhp2 .btn3 {
  top: 36%;
}

.cardhp1 .hello, .cardhp2 .hello {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  line-height: 35px;
  height: 100%;
  transition: 0.5s ease-in-out;
}

.cardhp1 .hidden, .cardhp2 .hidden {
  font-size: 16px;
  line-height: 20px;
  font-weight: normal;
  display: block;
  opacity: 0;
  transition: all 0.3s ease-in;
}

.cardhp1:hover .hidden, .cardhp2:hover .hidden {
  opacity: 1;
}

.cardhp1:hover .hello, .cardhp2:hover .hello {
  transform: translateY(-50px);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .cardhp1, .cardhp2 {
    width: 220px;
    height: 420px;
  }
}

@media (max-width: 767px) {
  .cardhp1, .cardhp2 {
    width: 250px;
    height: 420px;
  }
}

/****************************************************************************Card Slide Up SMM********************************************************************************************************/
.card-container3 {
  width: 280px;
  height: 300px;
  position: relative;
  background: linear-gradient(-45deg, #000 0%, #fff 100% );
  border-radius: 10px;
  box-shadow: 2px 5px 15px #66FCF1;
  overflow: hidden;
}

.card3 {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.card3 .front-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
}

.card3 .front-content {
  font-size: 30px;
  font-weight: 700;
  opacity: 1;
  background: linear-gradient(-45deg, #66FCF1 0%, #fff 100% );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
}

.card3 .content3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  background: linear-gradient(-45deg, #66FCF1 0%, #fff 100% );
  color: #000000;
  padding: 20px;
  line-height: 1.5;
  border-radius: 5px;
  pointer-events: none;
  transform: translateY(96%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.card3 .content3 .heading3 {
  font-size: 20px;
  font-weight: 700;
}

.card3:hover .content3 {
  transform: translateY(0);
}

.card3:hover .front-content {
  transform: translateY(-30%);
}

.card3:hover .front-content p {
  opacity: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
   .card-container3 {
  width: 200px;
  height: 420px;
  }
}

@media (max-width: 767px) {
  .card-container3 {
  width: 280px;
  height: 300px;
  }
}

/*************************************************************************************Card Homepage About TSI***********************************************************************************************/
.cardabout {
  font-family: Poppins;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 450px;
  border-radius: 15px;
  transition: .3s;
  background-color: #66FCF1;
  outline: 5px solid white;
}

.cardabout-p {
  position: absolute;
  text-align: center;
    font-size: 42px;
  font-weight: 400;
}

.cardabout::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 15px;
  width: 320px;
  height: 450px;
  background-color: #000000;
  transition: .7s;
  background-image: linear-gradient(62deg, #000000 0%, #66FCF1 100%);
}

.cardabout-countent {
  padding: 5px;
  font-family: Poppins;
  text-align: center;
  color: transparent;
  font-size: 14px;
  font-weight: 400;
  transition: all .7s;
  opacity: 0;
}

.cardabout:hover {
  transition: .7s;
  transform: rotate(180deg);
}

.cardabout:hover > .cardabout-p {
  color: transparent;
}

.cardabout:hover > .cardabout-countent {
  opacity: 1;
  color: #ffffff;
  transform: rotate(-180deg);
}

@media (max-width: 1024px) {
  .cardabout{
  width:220px;

    font-size: 1em; /* Resize the paragraph text */
    line-height: 1;
  }
  .cardabout::after {
 width:220px;
  }
}

@media (max-width: 767px) {
   .cardabout{
  width:100%;

  }
  .cardabout::after {
 width:100%;

  }
.cardabout-countent {
    font-size:14px;
    line-height:1.5em;
}
}

/*************************************************************************************Card Homepage Grow Bottom TSI***********************************************************************************************/

.cardgrow {
  position: relative;
  width: 300px;
  height: 300px;
  background: lightgrey;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  transition: all 1s ease-in-out;
}

.backgroundgrow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 107%, #ff89cc 0%, #9cb8ec 30%, #00ffee 60%, #62c2fe 100%);
}

.logogrow {
  position: absolute;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  transition: all 0.6s ease-in-out;
}

.logogrow .logo-svg {
  fill: white;
  width: 30px;
  height: 30px;
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.icon .svg {
  fill: rgba(255, 255, 255, 0.797);
  width: 100%;
  transition: all 0.5s ease-in-out;
}

.box {
  position: absolute;
  padding: 10px;
  text-align: right;
  background: rgba(255, 255, 255, 0.389);
  border-top: 2px solid rgb(255, 255, 255);
  border-right: 1px solid white;
  border-radius: 10% 13% 42% 0%/10% 12% 75% 0%;
  box-shadow: rgba(100, 100, 111, 0.364) -7px 7px 29px 0px;
  transform-origin: bottom left;
  transition: all 1s ease-in-out;
}

.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.box:hover .svg {
  fill: white;
}

.box1 {
  width: 90%;
  height: 90%;
  bottom: -90%;
  left: -90%;
}

.box1::before {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #ff53d4 60%, #62c2fe 90%);
}

.box1:hover::before {
  opacity: 1;
}

.box1:hover .icon .svg {
  filter: drop-shadow(0 0 5px white);
}

.box2 {
  width: 70%;
  height: 70%;
  bottom: -70%;
  left: -70%;
  transition-delay: 0.2s;
}

.box2::before {
  background: radial-gradient(circle at 30% 107%, #91e9ff 0%, #00ACEE 90%);
}

.box2:hover::before {
  opacity: 1;
}

.box2:hover .icon0 .svg {
  filter: drop-shadow(0 0 5px white);
}

.box3 {
  width: 50%;
  height: 50%;
  bottom: -50%;
  left: -50%;
  transition-delay: 0.4s;
}

.box3::before {
  background: radial-gradient(circle at 30% 107%, #969fff 0%, #b349ff 90%);
}

.box3:hover::before {
  opacity: 1;
}

.box3:hover .icon .svg {
  filter: drop-shadow(0 0 5px white);
}

.box4 {
  width: 30%;
  height: 30%;
  bottom: -30%;
  left: -30%;
  transition-delay: 0.6s;
}

.cardgrow:hover {
  transform: scale(1.1);
}

.cardgrow:hover .box {
  bottom: -1px;
  left: -1px;
}

.cardgrow:hover .logogrow {
  transform: translate(0, 0);
  bottom: 20px;
  right: 20px;
}

/*************************************************************************************Card Packages***********************************************************************************************/
.main__heading {
  font-family: "Poppins";
  font-weight: 600;
  font-size: 1.25em;
  margin-bottom: 0.75em;
  text-align: center;
  color: #eceff1;
}

.cardscta {
  position: relative;
}

.cardcta {
  --flow-space: 0.1em;
  --hsl: var(--hue), var(--saturation), var(--lightness);
  flex: 1 1 14rem;
  padding: 0.55em 1.5em;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-items: start;
  gap: 0.25em;
  color: #eceff1;
  background-color: #000000;
  border: 1px solid #eceff133;
  border-radius: 15px;
}

.cardcta:nth-child(1) {
  --hue: 165;
  --saturation: 82.26%;
  --lightness: 51.37%;
}

.card__bullets {
  line-height: 1.2;
}

.card__heading {
  font-size: 1.05em;
  font-weight: 600;
  color: #66FCF1;
}

.card__price {
  font-size: 1.95em;
  font-weight: 700;
}

.flow > * + * {
  margin-top: var(--flow-space, 1.25em);
}

.cta {
  display: block;
  align-self: end;
  margin: 0em 0 0.5em 0;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: transparent;
  outline: 1px solid white;
  padding: 0.7em;
  border-radius: 10px;
  font-size: 1.2rem;
  font-weight: 600;
}

.cardcta:hover {
  --lightness: 80%;
  background: #66FCF1;
  color: #000;
  outline: 1px solid rgb(255, 255, 255);
  box-shadow: inset 0 0 80px whitesmoke, inset 20px 0 80px rgba(255, 0, 255, 0.747),
    inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff,
    0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff;
  transition: all ease-in-out 0.3s;
}

.cardcta:hover > .cta {
  outline: none;
  background-color: #0d0d0d;
}

/*************************************************************************************Card Graphic Design***********************************************************************************************/
.card-container0 {
  width: 280px;
  height: 400px;
  position: relative;
  background: linear-gradient(-45deg, #000 0%, #fff 100% );
  border-radius: 10px;
  box-shadow: 2px 5px 15px #66FCF1;
  overflow: hidden;
}

.card0 {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.card0 .front-content0 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
}

.card0 .front-content0 p {
  font-size: 120px;
  font-weight: 700;
  opacity: 1;
  background: linear-gradient(-45deg, #fff 0%, #000 100% );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
}

.card0 .content0 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  background: linear-gradient(-45deg, #66FCF1 0%, #fff 100% );
  color: #000000;
  padding: 20px;
  line-height: 1.5;
  border-radius: 5px;
  pointer-events: none;
  transform: translateY(96%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.card0 .content0 .heading0 {
  font-size: 20px;
  font-weight: 700;
}

.card0:hover .content0 {
  transform: translateY(0);
}

.card0:hover .front-content0 {
  transform: translateY(-30%);
}

.card0:hover .front-content0 p {
  opacity: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
   .card-container0 {
  scale: 0.8;
  }
}

@media (max-width: 767px) {
  .card-container0 {
  scale: 1;
  margin-left:50px;
  }
}

/**************************************************************************Section sliding over eachother***********************************************************************************************/
/* Making section 2 sliding over section 1 after time settings: 
-fadeOut: Makes section 1 gradually disappear (opacity from 1 to 0)

--slideUp: Moves section 2 upward from below into view

ease: Controls the animation speed curve (starts/ends slower, faster in middle) */

.section-1 {
    height: 100vh;
    position: relative;
    z-index: 2;
    animation: fadeOut 0.5s ease 2s forwards!important;
	animation-delay: 2s!important; /* Explicit delay */
}

.section-2 {
    height: 100vh;
    width: 110vw!important;
    position: relative;
    margin-left:-1px;
    margin-top: -100vh;
    transform: translateY(100vh);
	  transform: translateZ(0)!important; /* Force hardware layer */
    opacity: 0;
    animation: slideThenFade 7.5s ease 2.5s forwards; /* Total duration: slide + fade */
	  pointer-events: auto !important;
    z-index: 3;
    overflow: hidden!important;
}

/* Fix for animation interfering with click events */
.section-2 .elementor-container {
    pointer-events: auto !important;
}

/* Fix the invisible overlay issue */
.section-2::after {
    display: none !important;
}

/* Force reflow and remove any invisible blockers */
.elementor-section, .elementor-container {
    transform: translateZ(0)!important;
}

@keyframes slideThenFade {
    0% {
        transform: translateY(100vh);
        opacity: 0;
    }
    40% {
        transform: translateY(0);
        opacity: 0; /* Stay invisible until slide completes */
    }
    100% {
        transform: translateY(0);
        opacity: 1; /* Then fade in */
    }
}

/* Makes Advanced Slider/Carousel from Royal Addons to work in section 1 Potential fix for slider viewport issues */
.swiper {
    overflow: hidden !important;
}

a {
    color: #54595F; /* Default link color */
    text-decoration: none; /* Remove underline */
}

a:hover {
    color: #66FCF1; /* Change color on hover (you can adjust this color as needed) */
}


/************************************************************************************************************************************************************************************/
.wpr-template-edit-btn {
    display: none !important;
}