.countdown-container-product-page {
   box-sizing: content-box !important;
   line-height: normal 
}

.title p{
  margin: 0;
}

.title {
  margin: 0;
}

.subheading p{
  margin: 0;
}

.subheading {
  margin: 0;
}     



.countdown-container-top-bottom-page{
   box-sizing: content-box !important;
   line-height: normal;
   width: 100%;
}

.countdown-container-landing-page{
   box-sizing: content-box !important;
   line-height: normal;
}

#countdown-container-email-page{
   box-sizing: content-box;
   line-height: normal;
}
.futureblink-default-countdownbar {
   display: flex;
   gap: 10px;
   align-items: center;
   justify-content: center;
   background-color: #ffb800;
   padding: 10px;
   z-index: 10;
   flex-wrap: wrap;
   text-align: center
 }
 .futureblink-default-countdownbar p {
   margin: 0;
 }


@media (max-width: 530px) {
   #countdown-container-top-bottom-page .top-bottom-countdownbar-container{
     flex-direction: column;
     align-items: center;
   }
  
 }

 
/* Background patterns */
.fblink-pattern-tiny_square {
   --s: 8px;
   /* the size */
   --c1: #c6f0f9;
   --c2: #f3b90d;
 
   background:
     conic-gradient(at 60% 60%, var(--c1) 75%, #0000 0) 0 0/calc(5*var(--s)/2) calc(5*var(--s)/2),
     repeating-conic-gradient(var(--c1) 0 25%, #0000 0 50%) 0 0/calc(5*var(--s)) calc(5*var(--s)),
     repeating-conic-gradient(var(--c2) 0 25%, var(--c1) 0 50%) 0 0/var(--s) var(--s) !important;
 }
 
 .fblink-pattern-random_grain {
   --s: 4px;
   --g: repeating-conic-gradient(#774F38 0 25%, #ECE5CE 0 50%) 0/;
   background:
     var(--g) calc(1*var(--s)) calc(7*var(--s)),
     var(--g) calc(2*var(--s)) calc(5*var(--s)),
     var(--g) calc(3*var(--s)) calc(3*var(--s)),
     var(--g) calc(5*var(--s)) calc(2*var(--s)),
     var(--g) calc(7*var(--s)) calc(1*var(--s));
   background-blend-mode: darken;
 }
 
 .fblink-pattern-puzzle {
   --sz: 5px;
   --c1: #4b2889;
   --c2: #673ab7;
   --c3: #401c81;
   --c4: #2d125d;
   --ts: 50% / calc(var(--sz) * 10) calc(var(--sz) * 10);
   --pz: calc(var(--sz) * 0.65), #fff0 calc((var(--sz) * 0.65) + 1px);
   background: radial-gradient(circle at 53% 25%, var(--c4) var(--pz)) var(--ts),
     radial-gradient(circle at 75% 47%, var(--c2) var(--pz)) var(--ts),
     radial-gradient(circle at 3% 75%, var(--c2) var(--pz)) var(--ts),
     radial-gradient(circle at 25% 53%, var(--c4) var(--pz)) var(--ts),
     radial-gradient(circle at 53% 75%, var(--c3) var(--pz)) var(--ts),
     radial-gradient(circle at 75% 97%, var(--c1) var(--pz)) var(--ts),
     radial-gradient(circle at 3% 25%, var(--c1) var(--pz)) var(--ts),
     radial-gradient(circle at 25% 3%, var(--c3) var(--pz)) var(--ts),
     conic-gradient(from 0deg at 50% 50%,
       var(--c1) 0 25%,
       var(--c2) 0 50%,
       var(--c3) 0 75%,
       var(--c4) 0 100%) var(--ts);
 }
 
 
 .fblink-pattern-flowers {
   --color-primary: rgb(255, 220, 156);
   --color-secondary: rgb(145, 255, 123);
   --color-accent1: rgb(248, 144, 227);
   --color-accent2: rgb(191, 171, 251);
   --color-bg: #98f3f8;
 
   background:
     radial-gradient(circle at 82px 82px, var(--color-primary) 10px, transparent 11px),
     radial-gradient(circle at 97px 82px, var(--color-secondary) 10px, transparent 11px),
     radial-gradient(circle at 82px 97px, var(--color-secondary) 10px, transparent 11px),
     radial-gradient(circle at 67px 82px, var(--color-secondary) 10px, transparent 11px),
     radial-gradient(circle at 82px 67px, var(--color-secondary) 10px, transparent 11px),
 
     radial-gradient(circle at 27px 82px, var(--color-secondary) 12px, transparent 13px),
     radial-gradient(circle at 41px 69px, var(--color-primary) 12px, transparent 13px),
     radial-gradient(circle at 41px 95px, var(--color-primary) 12px, transparent 13px),
     radial-gradient(circle at 15px 95px, var(--color-primary) 12px, transparent 13px),
     radial-gradient(circle at 15px 69px, var(--color-primary) 12px, transparent 13px),
 
     radial-gradient(circle at 82px 27px, var(--color-secondary) 12px, transparent 13px),
     radial-gradient(circle at 95px 15px, var(--color-accent1) 12px, transparent 13px),
     radial-gradient(circle at 95px 41px, var(--color-accent1) 12px, transparent 13px),
     radial-gradient(circle at 69px 41px, var(--color-accent1) 12px, transparent 13px),
     radial-gradient(circle at 69px 15px, var(--color-accent1) 12px, transparent 13px),
 
     radial-gradient(circle at 27px 27px, var(--color-primary) 10px, transparent 11px),
     radial-gradient(circle at 42px 27px, var(--color-accent2) 10px, transparent 11px),
     radial-gradient(circle at 27px 42px, var(--color-accent2) 10px, transparent 11px),
     radial-gradient(circle at 12px 27px, var(--color-accent2) 10px, transparent 11px),
     radial-gradient(circle at 27px 12px, var(--color-accent2) 10px, transparent 11px);
 
   background-color: var(--color-bg);
   background-size: 110px 110px;
 }
 
 .fblink-pattern-radial {
   --size: 50px;
   --yellow: #ffce80;
   --dark-blue: #a4e1ff;
   --teal: #c0fff9;
   position: relative;
   background: radial-gradient(transparent 43%,
       var(--dark-blue) 44%,
       var(--dark-blue) 50%,
       transparent 51%,
       transparent 75%,
       var(--yellow) 76%,
       var(--yellow) 82%,
       var(--dark-blue) 83%),
     radial-gradient(transparent 43%,
       var(--dark-blue) 44%,
       var(--dark-blue) 50%,
       var(--teal) 51%,
       var(--teal) 67%,
       transparent 68%,
       transparent 75%,
       var(--yellow) 76%,
       var(--yellow) 82%,
       var(--teal) 83%);
   background-size: var(--size) var(--size);
   background-position: 0 0, calc(var(--size) / 2) calc(var(--size) / 2);
 }
 
 .fblink-pattern-upholstery {
   background:
     radial-gradient(rgba(76, 76, 76, 1) 4%, rgba(61, 61, 61, 1) 9%, rgba(61, 61, 61, 0) 9%) 0 0,
     radial-gradient(rgba(76, 76, 76, 1) 4%, rgba(61, 61, 61, 1) 8%, rgba(61, 61, 61, 0) 10%) 25px 25px,
     radial-gradient(rgba(76, 76, 76, 0.8) 20%, rgba(61, 61, 61, 0)) 25px 0,
     radial-gradient(rgba(76, 76, 76, 0.8) 20%, rgba(61, 61, 61, 0)) 0 25px,
     radial-gradient(rgba(61, 61, 61, 1) 35%, rgba(61, 61, 61, 0) 60%) 25px 0,
     radial-gradient(rgba(61, 61, 61, 1) 35%, rgba(61, 61, 61, 0) 60%) 50px 25px,
     radial-gradient(rgba(53, 53, 53, 0.7), rgba(61, 61, 61, 0)) 0 0,
     radial-gradient(rgba(53, 53, 53, 0.7), rgba(61, 61, 61, 0)) 25px 25px,
     linear-gradient(45deg, rgba(61, 61, 61, 0) 49%, rgba(0, 0, 0, 1) 50%, rgba(61, 61, 61, 0) 70%) 0 0,
     linear-gradient(-45deg, rgba(61, 61, 61, 0) 49%, rgba(0, 0, 0, 1) 50%, rgba(61, 61, 61, 0) 70%) 0 0;
 
   background-color: rgba(61, 61, 61, 1);
   background-size: 50px 50px;
   /* Reduced size for a denser fblink-pattern */
 }
 
 .fblink-pattern-cheese {
   --cheese-size: 50px;
   background:
     radial-gradient(circle at 20% 30%, #d6a801 10%, transparent 12%),
     radial-gradient(circle at 70% 50%, #c49000 8%, transparent 10%),
     radial-gradient(circle at 40% 80%, #b78300 6%, transparent 8%),
     radial-gradient(circle at 85% 20%, #e0b000 7%, transparent 9%),
     conic-gradient(from 180deg at 50% 50%, #f5c518, #f1c40f, #e0b000);
   background-size: var(--cheese-size) var(--cheese-size);
 }
 
 /* background images for patterns */
 
 .fblink-pattern-balloon {
   background: url('./Balloon.png') ;
 }
 
 .fblink-pattern-sale {
   background: url('./sale\ .png') ;
 }
 
 .fblink-pattern-discount {
   background: url('./Discount.png') ;
 }
 
 .fblink-pattern-girly {
   background: url('./Girly.png') ;
 }
 
 .fblink-pattern-birthday {
   background: url('./Birthday.png') ;
 }
 
 .fblink-pattern-birthday1 {
   background: url('./Birthday\ 1.png') ;
 }
 
 .fblink-pattern-carnival_monday {
   background: url('./Carnival\ monday.png') ;
   position: relative;
   z-index: 0;
 }
 .fblink-pattern-carnival_monday::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   border-radius: inherit;
   overflow: hidden;
   background: rgba(0, 0, 0, 0.5);
   z-index: -1;
 }
 
 .fblink-pattern-carnival_monday1 {
   background: url('./Carnival\ monday2.png') ;
   position: relative;
   z-index: 0;
 }
 .fblink-pattern-carnival_monday1::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   border-radius: inherit;
   overflow: hidden;
   background: rgba(0, 0, 0, 0.2);
   z-index: -1;
 }
 
 .fblink-pattern-childrens_day {
   background: url('./Childrens\ day.png') ;
 }
 
 .fblink-pattern-childrens_day2 {
   background: url('./Children\ day2.png') ;
 }
 
 .fblink-pattern-easter_sunday {
   background: url('./Easter\ sunday.png') ;
 }
 
 .fblink-pattern-easter_sunday2 {
   background: url('./Easter\ sunday2.png') ;
 }
 
 .fblink-pattern-fathers_day {
   background: url('./Fathers\ day.png') ;
 }
 
 .fblink-pattern-fathers_day2 {
   background: url('./Fathers\ day\ 2.png') ;
 }
 
 .fblink-pattern-fathers_day3 {
   background: url('./Fathers\ day3.png') ;
 }
 
 .fblink-pattern-labor_day {
   background: url('./Labour\ day.png') ;
   position: relative;
   z-index: 0;
 }
 .fblink-pattern-labor_day::before{
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   border-radius: inherit;
   overflow: hidden;
   background: rgba(0, 0, 0, 0.5);
   z-index: -1;
 }
 
 .fblink-pattern-labor_day2 {
   background: url('./Laborday2.png') ;
 }
 
 .fblink-pattern-mens_day {
   background: url('./Mens\ day.png') ;
 }
 
 .fblink-pattern-mothers_day {
   background: url('./Mothers\ day.png') ;
 }
 
 .fblink-pattern-mothers_day2 {
   background: url('./Mothersday2.png') ;
 }
 
 .fblink-pattern-thanksgiving {
   background: url('./Thanksgiving.png') ;
 }
 
 .fblink-pattern-thanksgiving2 {
   background: url('./Thanksgving2.png') ;
 }
 
 .fblink-pattern-veterans_day {
   background: url('./Veterans\ day.png') ;
 }
 
 .fblink-pattern-veterans_day2 {
   background: url('./Veterans\ day2.png') ;
 }
 
 .fblink-pattern-womans_day {
   background: url('./Womansday.png') ;
 }
 
 .fblink-pattern-womans_day2 {
   background: url('./Womansday2.png') ;
 }
 
 .fblink-pattern-womans_day3 {
   background: url('./Womans\ day3.png') ;
 }
 
 .fblink-pattern-wavy {
   background: url('./Wavy.png') ;
 }
 
 .fblink-pattern-fresh {
   background: url('./Fresh.png') ;
 }
 
 /* Icon animations */
 [data-animation="futureblink-holographic"] {
   transition: transform 0.3s ease;
   display: inline-block;
 }
 
 [data-animation="futureblink-holographic"]:hover {
   transform: scale(1.05);
 }
 
 
 [data-animation="futureblink-pulse"]:hover {
   animation: hoverPulse 400ms ease infinite alternate;
 }
 
 @keyframes hoverPulse {
   from {
     transform: scale(1);
     box-shadow: none;
   }
   to {
     transform: scale(1.07);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0);
   }
 }
 
 [data-animation="futureblink-push"]:hover {
   animation: hoverPush 300ms ease-out;
 }
 
 @keyframes hoverPush {
   to {
     transform: scale(0.8);
   }
 }
 
 [data-animation="futureblink-pop"]:hover {
   animation: hoverPop 300ms ease-out;
 }
 
 @keyframes hoverPop {
   to {
     transform: scale(1.2);
   }
 }
 
 [data-animation="futureblink-bounce_in"]:hover {
   animation: hoverBounceIn 700ms ease-out;
 }
 
 @keyframes hoverBounceIn {
   0% {
     transform: scale(1.2);
   }
   60% {
     transform: scale(1);
   }
   100% {
     transform: scale(1.3);
   }
 }
 
 [data-animation="futureblink-bounce_out"]:hover {
   animation: hoverBounceOut 700ms ease-out;
 }
 
 @keyframes hoverBounceOut {
   0% {
     transform: scale(0.8);
   }
   60% {
     transform: scale(1);
   }
   100% {
     transform: scale(0.7);
   }
 }
 
 [data-animation="futureblink-float"]:hover {
   transition-duration: 800ms;
   transform: translateY(-5px);
 }
 
 [data-animation="futureblink-sink"]:hover {
   transition-duration: 800ms;
   transform: translateY(5px);
 }
 
 [data-animation="futureblink-bob"]:hover {
   animation: hoverBob 900ms linear infinite alternate;
 }
 
 @keyframes hoverBob{
   0%{
     transform: translateY(-5px);
   } 50%{
     transform: translateY(4px);
   } 100%{
     transform: translateY(0);
   }
 }
 
 [data-animation="futureblink-skew"]:hover {
   transition-duration: 600ms;
   transform: skewX(-10deg);
 }
 
 [data-animation="futureblink-skew"]:hover {
   transition-duration: 600ms;
   transform: skewX(-10deg);
 }
 
 [data-animation="futureblink-wobble_horizontal"]:hover {
   animation: hoverWobbleHorizontal 900ms ease-in-out;
 }
 @keyframes hoverWobbleHorizontal {
   0%{ transform: translateX(0)}
   30%{ transform: translateX(-10px)}
   50%{ transform: translateX(6px);}
   80%{ transform: translateX(-7px);}
   100%{ transform: translateX(4px);}
 }
 
 [data-animation="futureblink-wobble_vertical"]:hover {
   animation: hoverWobbleVertical 900ms ease-in-out;
 }
 @keyframes hoverWobbleVertical {
   0%{ transform: translateY(0)}
   30%{ transform: translateY(-5px)}
   50%{ transform: translateY(4px);}
   80%{ transform: translateY(-3px);}
   100%{ transform: translateY(2px);}
 }
 
 
 [data-animation="futureblink-wobble_top"]:hover {
   animation: hoverWobbleTop 900ms ease-in-out;
   transform-origin: bottom;
 }
 @keyframes hoverWobbleTop {
   0%{ transform: skewX(0)}
   30%{ transform: skewX(-10deg)}
   50%{ transform: skewX(8deg);}
   80%{ transform: skewX(-5deg);}
   100%{ transform: skewX(4deg);}
 }
 
 [data-animation="futureblink-wobble_bottom"]:hover {
   animation: hoverWobbleBottom 900ms ease-in-out;
   transform-origin: top;
 }
 @keyframes hoverWobbleBottom {
   0%{ transform: skewX(0)}
   30%{ transform: skewX(-10deg)}
   50%{ transform: skewX(8deg);}
   80%{ transform: skewX(-5deg);}
   100%{ transform: skewX(4deg);}
 }
 
 [data-animation="futureblink-buzz"]:hover {
   animation: hoverBuzz 400ms linear infinite;
   transform-origin: center;
 }
 @keyframes hoverBuzz {
   0%{ transform: skewX(0)}
   30%{ transform: skewX(-10deg)}
   50%{ transform: skewX(10deg);}
   80%{ transform: skewX(-5deg);}
   100%{ transform: skewX(5deg);}
 }
 
 
 /* Icon Shadows */
 [data-shadow="futureblink-soft_glow"]{
   box-shadow: rgba(100, 100, 111, 0.4) 0px 7px 29px 0px;
 }
 
 [data-shadow="futureblink-subtle_drop"]{
   box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
 }
 
 [data-shadow="futureblink-light_drop"]{
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 }
 
 [data-shadow="futureblink-classic_drop"]{
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 }
 
 [data-shadow="futureblink-minimal"]{
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; 
 }
 
 [data-shadow="futureblink-sketch_style"]{
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
 }
 
 [data-shadow="futureblink-floating"]{
   box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
 }
 
 [data-shadow="futureblink-soft_sketch"]{
   box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
 }
 
 [data-shadow="futureblink-gentle_glow"]{
   box-shadow: rgba(17, 12, 46, 0.5) 0px 48px 50px 0px;
 }
 
 [data-shadow="futureblink-stripe_soft"]{
   box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
 }
 
 [data-shadow="futureblink-stripe_light"]{
   box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
 }
 
 [data-shadow="futureblink-material_light"]{
   box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
 }
 
 [data-shadow="futureblink-material_bold"]{
   box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
 }
 
 [data-shadow="futureblink-deep_soft"]{
   box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
 }
 
 [data-shadow="futureblink-lonely_planet"]{
   box-shadow: rgba(0, 0, 0, 0.8) 0px 30px 90px;
 }
 
 [data-shadow="futureblink-mac_os"]{
   box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
 }
 
 /* Hover color */
 .futureblink-icon-hover-cls:hover svg {
   stroke: var(--icon-hover-color);
 }


 .shake {
  animation: horizontal-shaking 1s infinite;
}

@keyframes horizontal-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateX(5px) }
  50% { transform: translateX(-5px) }
  75% { transform: translateX(5px) }
  100% { transform: translateX(0) }
}

.pulse{
  animation: pulse 1s ease-in infinite;
}

@keyframes pulse{
  25%  {transform: scale(0.9);}
  75%  {transform: scale(1.1);}
}

.zoom{
  animation: zoom-in-zoom-out 2s ease-out infinite;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}


.spin {
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  /* transform: rotate(3deg); */
   /* transform: rotate(0.3rad);/ */
   /* transform: rotate(3grad); */ 
   /* transform: rotate(.03turn);  */
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.pop{
  animation: pop 1s infinite;
}

@keyframes pop{
  50%  {transform: scale(1.2);}
}

.blink{
  animation: blink 1s linear infinite;
}
@keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}

.slide {
animation: slideeLeftToRight 1s ease-out infinite;
opacity: 0; /* start invisible */
}

@keyframes slideeLeftToRight {
0% {
  opacity: 0;
  transform: translateX(-30px); /* start slightly to the left */
}
100% {
  opacity: 1;
  transform: translateX(0); /* move to original position */
}
}

.fade {
position: relative;
display: inline-block;
animation: fadeLeftToRight 2s linear infinite;
mask-image: linear-gradient(to right, transparent 0%, black 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 100%);
mask-size: 200% 100%;
-webkit-mask-size: 200% 100%;
mask-position: 100% 0;
-webkit-mask-position: 100% 0;
}

@keyframes fadeLeftToRight {
0% {
  mask-position: 100% 0;
  -webkit-mask-position: 100% 0;
}
100% {
  mask-position: 0 0;
  -webkit-mask-position: 0 0;
}
}





/* button hover effects */
.glow {
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.glow:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left:-2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.glow:active {
  color: #000
}

.glow:active:after {
  background: transparent;
}

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

.glow:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

.pulse_hover {
position: relative;
overflow: visible; 
}


.pulse_hover  {
position: relative;
z-index: 1;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pulse_hover:active {
transform: translateY(-5px); /* Noticeable upward lift */
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); /* Deep shadow below */
}


.pulse_hover::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border: 2px solid #010101;
border-radius: inherit;
transform: translate(-50%, -50%) scale(1); /* Centered on button */
opacity: 0;
pointer-events: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
}

.pulse_hover:hover::after {
animation: borderPulse 0.6s ease-out;
}

@keyframes borderPulse {
0% {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.8;
}
100% {
  transform: translate(-50%, -50%) scale(1.3);
  opacity: 0;
}
}


.swipeRight {
  position: relative;
  overflow: hidden;
  transition: color 0.4s ease-in-out;
  z-index: 0;
}

.swipeRight::before {
  content: "";
  position: absolute;
  background-color: red;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: left 0.4s ease-in-out;
}

.swipeRight:hover::before {
  left: 0;
}

.swipeRight:hover {
  color: white; /* Optional: change text color on hover */
}


.blob {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.blob::before {
  content: '';
  position: absolute;
  bottom: -100%;  /* Start completely outside the button */
  left: 0;
  width: 200%;
  height: 200%;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'><path fill='%230087ff' fill-opacity='1' d='M0,160C80,160,160,120,240,96C320,72,400,80,480,100C560,120,640,150,720,160C800,170,880,150,960,160C1040,170,1120,200,1200,200C1280,200,1360,170,1440,160L1440,320L0,320Z'/></svg>") repeat-x;
  background-size: cover;
  transition: background-position 4s linear, bottom 1s ease-out, opacity 1s ease-out;
  opacity: 1;
  z-index: -1;
}

.blob:hover::before {
  bottom: 0%;  /* Move to the top on hover */
  opacity: 1;  /* Fully visible when hovered */
  animation: waveMove 4s linear forwards;  /* Smooth movement from left to right */
}

.blob:not(:hover)::before {
  bottom: -100%;  /* Move completely out of view when not hovered */
  opacity: 0;  /* Fade out completely when sinking */
  animation: waveMoveReverse 2s linear forwards;  /* Ensure it moves from right to left when sinking */
}

@keyframes waveMove {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 1000px;
  }
}

@keyframes waveMoveReverse {
  0% {
    background-position-x: 1000px;
  }
  100% {
    background-position-x: 0;
  }
}


.flush {
position: relative;
overflow: hidden;
border: 2px solid #0087ff;
border-radius: 8px;
color: white;
padding: 15px 30px;
background-color: transparent;
cursor: pointer;
z-index: 0;
}

/* Base blue liquid fill */
.flush::before {
content: '';
position: absolute;
inset: 0;
background: #0087ff;
z-index: -2;
transition: clip-path 0.4s ease;
clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%);
animation: bubbleRise 4s linear infinite;
opacity: 0.9;
}

/* Overlay zones to trigger hover effects */
.flush::after,
.flush::middle,
.flush::left,
.flush::right {
content: '';
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
}

/* Left zone */
.flush::left {
left: 0;
width: 33.33%;
}

/* Middle zone */
.flush::middle {
left: 33.33%;
width: 33.34%;
}

/* Right zone */
.flush::right {
left: 66.66%;
width: 33.34%;
}

/* Middle hover: flat liquid at 50% */
.flush:hover::before {
clip-path: polygon(0% 100%, 0% 50%, 100% 50%, 100% 100%);
}

/* Left triangle */
.flush:hover::left:hover ~ .flush::before {
clip-path: polygon(0% 100%, 0% 20%, 100% 80%, 100% 100%);
}

/* Right triangle */
.flush:hover::right:hover ~ .flush::before {
clip-path: polygon(0% 100%, 0% 80%, 100% 20%, 100% 100%);
}

/* Bubbles rising animation */
@keyframes bubbleRise {
0%, 100% {
  background-position: 0% 100%;
}
50% {
  background-position: 0% 0%;
}
}


.smoosh {
transition: all 0.2s ease;  /* Smooth transition */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);  /* Initial shadow (looks raised) */
}

/* When hovered, the button looks like it's being pressed down */
.smoosh:hover {
transform: scale(0.98);  /* Shrinks the button to make it appear pressed */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);  /* Shadow looks smaller and sharper */
}

/* When clicked (active), it looks more pressed, like a key press */
.smoosh:active {
transform: scale(0.95);  /* Further shrinking for active press effect */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);  /* Even smaller shadow for deeper pressed effect */
}

.squishy {
box-shadow: 
  inset 0 1px 0 0 #f4f4f4,
  0 1px 0 0 #efefef,
  0 2px 0 0 #ececec,
  0 4px 0 0 #e0e0e0,
  0 5px 0 0 #dedede,
  0 6px 0 0 #dcdcdc,
  0 7px 0 0 #cacaca,
  0 7px 8px 0 #cecece;
}

.squishy:hover {
transform: translateY(4px);
box-shadow: 
  inset 0 1px 0 0 #f4f4f4,
  0 1px 0 0 #efefef,
  0 1px 0 0 #ececec,
  0 2px 0 0 #e0e0e0,
  0 2px 0 0 #dedede,
  0 3px 0 0 #dcdcdc,
  0 4px 0 0 #cacaca,
  0 4px 6px 0 #cecece;
}

.collision {
position: relative;
display: inline-block;
padding: 16px 48px;
font-size: 16px;
color: #333;
background: #eee;
border: none;          /* no border */
border-radius: 12px;
cursor: pointer;
overflow: hidden;
user-select: none;
transition: background-color 0.3s ease 0.8s, color 0.3s ease 0.8s; /* delay to sync with bubbles */
}

/* Bubbles */
.collision::before,
.collision::after {
content: "";
position: absolute;
top: 50%;
width: 40px;
height: 40px;
background: #00aaff;
border-radius: 50%;
box-shadow: 0 0 12px #00aaffaa;
transform: translateY(-50%);
pointer-events: none;
opacity: 0;
z-index: 10;
}

/* Left bubble starts off-screen left */
.collision::before {
left: -50px;
}

/* Right bubble starts off-screen right */
.collision::after {
right: -50px;
}

/* When hovered, add animations */
.collision:hover::before {
opacity: 1;
animation: moveRight 1s linear forwards;
}

.collision:hover::after {
opacity: 1;
animation: moveLeft 1s linear forwards;
}

/* No animation when not hovered */
.collision:not(:hover)::before,
.collision:not(:hover)::after {
animation: none;
opacity: 0;
}

/* Bubbles move from edges to center */
@keyframes moveRight {
0% {
  left: -50px;
  opacity: 1;
}
80% {
  left: calc(50% - 20px);
  opacity: 1;
}
100% {
  left: calc(50% - 20px);
  opacity: 0;
}
}

@keyframes moveLeft {
0% {
  right: -50px;
  opacity: 1;
}
80% {
  right: calc(50% - 20px);
  opacity: 1;
}
100% {
  right: calc(50% - 20px);
  opacity: 0;
}
}

/* Background fill on hover with delay */
.collision:hover {
background-color: #00aaff;
color: white;
}

/* Reset background and color on unhover */
.collision:not(:hover) {
background-color: #eee;
color: #333;
}

.bubble {
position: relative;
display: inline-block;
padding: 16px 48px;
font-size: 16px;
color: #fff;
background: #00aaff;
border: none;
border-radius: 12px;
cursor: pointer;
overflow: visible;
transition: transform 0.2s ease;
}

/* Bubbles */
.bubble::before,
.bubble::after {
content: "";
position: absolute;
width: 30px;
height: 30px;
background: inherit;
border-radius: 50%;
opacity: 0;
pointer-events: none;
z-index: 2;
transform: scale(1);
}

/* Top-left bubble */
.bubble::before {
top: 0;
left: 0;
}

/* Bottom-right bubble */
.bubble::after {
bottom: 0;
right: 0;
}

/* Animate on hover */
.bubble:hover::before {
animation: burstTopLeft 1s ease-out forwards;
}

.bubble:hover::after {
animation: burstBottomRight 1s ease-out forwards;
}

/* Button squish animation */
.bubble:hover {
animation: stretchButton 0.6s ease-out;
}

/* Reset non-hover state */
.bubble:not(:hover)::before,
.bubble:not(:hover)::after {
animation: none;
opacity: 0;
}

.bubble:not(:hover) {
animation: none;
transform: scale(1);
}

/* Top-left bubble: full move out, fade at end */
@keyframes burstTopLeft {
0% {
  opacity: 1;
  transform: scale(1) translate(0, 0);
}
70% {
  transform: scale(1) translate(-30px, -30px);
  opacity: 1;
}
100% {
  transform: scale(1) translate(-60px, -60px);
  opacity: 0;
}
}

/* Bottom-right bubble: full move out, fade at end */
@keyframes burstBottomRight {
0% {
  opacity: 1;
  transform: scale(1) translate(0, 0);
}
70% {
  transform: scale(1) translate(30px, 30px);
  opacity: 1;
}
100% {
  transform: scale(1) translate(60px, 60px);
  opacity: 0;
}
}

/* Button squish effect */
@keyframes stretchButton {
0% {
  transform-origin: center;
  transform: scale(1) translate(0, 0);
}
25% {
  transform-origin: top left;
  transform: scale(1.05, 0.95) translate(-5px, -5px);
}
50% {
  transform-origin: bottom right;
  transform: scale(0.95, 1.05) translate(5px, 5px);
}
100% {
  transform-origin: center;
  transform: scale(1) translate(0, 0);
}
}



.mask1 {
position: relative;
display: inline-block;
padding: 16px 48px;
font-size: 16px;
color: inherit;
background: inherit;
border-radius: 12px;
cursor: pointer;
overflow: visible;
}

.mask1::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: currentColor;
border-radius: 50%;
clip-path: polygon(
  50% 5%, 61% 20%, 75% 15%, 80% 30%, 90% 40%, 85% 55%, 95% 65%, 80% 75%, 70% 90%,
  55% 85%, 40% 95%, 30% 80%, 15% 70%, 10% 55%, 5% 40%, 15% 30%, 25% 15%, 39% 20%
);
transform: translate(-50%, -50%) scale(0);
opacity: 0;
pointer-events: none;
z-index: 2;
}

/* Animation for splash: expand + fade out */
@keyframes splashExpandFade {
0% {
  width: 0;
  height: 0;
  opacity: 0.6;
  transform: translate(-50%, -50%) scale(0);
}
50% {
  width: 150%;
  height: 150%;
  opacity: 0.6;
  transform: translate(-50%, -50%) scale(1);
}
100% {
  width: 150%;
  height: 150%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
}
}

/* On hover, run the splash animation */
.mask1:hover::before {
animation: splashExpandFade 0.8s forwards;
}