div#uploadArea {  display:block;  cursor:pointer;  width:100%;  max-width:550px;  text-align:center;  padding:25px;  box-shadow:0 0 15px 0px #0002;  border-radius:10px;  margin:10px auto 30px; } .upload-area.dragover {  background-color:#f0f0f0; } .preview-container {  position:relative;  width:max-content;  border-radius:10px; } .preview-original, .preview-processed {  position:absolute;  top:0;  left:0;  width:100%;  transition:clip-path 1.5s ease-in-out; } .preview-processed {  position:relative;  z-index:1; } .preview-original.hide {  clip-path:inset(0 100% 0 0); } .spinner {  border:4px solid #f3f3f3;  border-top:4px solid #3498db;  border-radius:50%;  width:24px;  height:24px;  animation:spin 1s linear infinite;  margin:auto; } @keyframes spin {  0% {   transform:rotate(0deg);  }  100% {   transform:rotate(360deg);  } }  .preview-container {  position:relative;  display:inline-block;  max-width:100%;  overflow:hidden; } .preview-processed {  display:block;  width:100%;  height:auto;  position:relative;  z-index:1; } .preview-original {  position:absolute;  top:0;  left:0;  width:100%;  height:auto;  z-index:2;  clip-path:inset(0% 0% 0% 0%);  transition:clip-path 2s ease-in-out; }  .visualLoaderOverlay {  position:absolute;  background:radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);  width:100%;  height:calc(100% - 6px);  opacity:0.5;  border-radius:10px; } .star {  position:absolute;  fill:#d5e21e;  opacity:0.6;  animation:twinkle 2s infinite ease-in-out alternate; } .star:nth-child(odd) {  animation-duration:0.5s; } .star:nth-child(even) {  animation-duration:1s; } @keyframes twinkle {  0% {   opacity:0.2;   transform:scale(1);  }  100% {   opacity:1;   transform:scale(1.3);  } }  div#previewContainer {  max-width:600px;  max-height:600px;  width:100%;  margin:0 auto;   justify-content:center;  align-items:center;  height:100%;  margin-bottom:25px;  display:none; } .preview-container.whiteBG {  background-image:url(https://trackme.host/w3speedup-new/wp-content/uploads/2025/07/image-66.png);  background-position:center;  background-repeat:no-repeat;  background-size:cover; }  .btn {  position:relative;  display:inline-block;  padding:20px 50px;  margin:10px;  color:#fff;  font-size:1.4rem;  letter-spacing:2px;  border-radius:50px;  outline:none;  border:none;  cursor:pointer;  text-transform:uppercase;  box-sizing:border-box; } .btn--liquidBtn {  overflow:hidden;  position:relative; } .btn--liquidBtn span {  position:relative;  z-index:1;  font-size:18px;  font-weight:700; } .btn--liquidBtn div {  position:absolute;  top:-80px;  left:0;  width:100%;  height:200px;  background:#1e59bc;  box-shadow:inset 0 0 50px rgba(0, 0, 0, 0.5);  transition:0.5s; } .btn--liquidBtn:hover div {  top:-120px; } .btn--liquidBtn div::before, .btn--liquidBtn div::after {  content:"";  position:absolute;  top:0;  left:50%;  width:165%;  height:200%;  transform:translate(-50%, -75%); } .btn--liquidBtn div::before {  border-radius:45%;  background:rgba(20, 20, 20, 1);  animation:liquidAnimation 10s linear infinite; } .btn--liquidBtn div::after {  border-radius:40%;  background:rgba(20, 20, 20, 0.5);  animation:liquidAnimation 10s linear infinite; } @keyframes liquidAnimation {  0% {   transform:translate(-50%, -75%) rotate(0deg);  }  100% {   transform:translate(-50%, -75%) rotate(360deg);  } } div#uploadArea {  font-weight:700; }  .btn-slide2 {  position:relative;   height:54px;  width:200px;  line-height:50px;  padding:0;  border-radius:50px;  background:#fdfdfd;  border:2px solid #1e5aba;  margin:10px;  transition:0.5s; } .btn-slide2 {  border:2px solid #1e5aba; } .btn-slide2:hover {  background-color:#1e5aba; } .btn-slide2:hover span.circle2 {  left:100%;  margin-left:-45px;  background-color:#fdfdfd;  color:#0099cc; } .btn-slide2:hover span.circle2 {  color:#1e5aba; } .btn-slide2:hover span.title2 {  left:40px;  opacity:0; } .btn-slide2:hover span.title-hover2 {  opacity:1;  left:-10px; } .btn-slide2 span.circle2 {  display:block;  background-color:#1e5aba;  color:#fff;  position:absolute;  float:left;  margin:5px;  line-height:42px;  height:40px;  width:40px;  top:0;  left:0;  transition:0.5s;  border-radius:50%; } .btn-slide2 span.circle2 {  background-color:#1e5aba; } .btn-slide2 span.title2, .btn-slide2 span.title-hover2 {  position:absolute;  left:90px;  text-align:center;  margin:0 auto;  font-size:16px;  font-weight:bold;  color:#30abd5;  transition:0.5s; } .btn-slide2 span.title2, .btn-slide2 span.title-hover2 {  color:#1e5aba;  left:75px; } .btn-slide2 span.title-hover2 {  left:80px;  opacity:0; } .btn-slide2 span.title-hover2 {  color:#fff;  position:relative; } #downloadBtn {  opacity:0;  transform:translateY(10px);  transition:opacity 0.5s ease, transform 0.5s ease; } #downloadBtn.show {  opacity:1;  transform:translateY(0); } .downloadDiv {  display:flex;  justify-content:center;  padding-top:40px; } .downloadDIv {  display:flex;  justify-content:center;  align-items:center;  padding-top:40px; } @media (max-width:405px) {  button#fileInput {   padding:15px 30px;  }  button#fileInput span {   font-size:15px;  }  .container.backgroundRemover {   padding-left:0 !important;   padding-right:0 !important;  } }  .containerSlider {  display:flex;  min-height:50vh;  max-width:1200px;  padding:10px;  margin:0 auto; }  .sidebar {  padding:20px;  display:flex;  flex-direction:column;  gap:10px;  min-width:150px; } .tab {  background:none;  border:none;  padding:10px 15px;  border-radius:10px;  text-align:left;  cursor:pointer;  font-weight:500;  color:#333;  } .tab:hover {  background:#eee; } .tab.active {  background:#333;  color:#fff; }  .content {  flex:1;  padding:20px; } .tab-content {  display:none; } .tab-content.active {  display:block;  background:#fff;   border-radius:10px; }  .before-after-slider {  position:relative;  overflow:hidden;  max-width:100%;  border-radius:10px; } .before-after-slider img {  display:block;  width:100%;  height:auto; } .before-after-slider .before {  position:absolute;  top:0;  left:0;  width:50%;  height:100%;  overflow:hidden; } .before-after-slider .resizer {  position:absolute;  top:0;  left:50%;  width:4px;  height:100%;  background:#fff;  cursor:ew-resize;  z-index:10; }  @media (max-width:1024px) {  .containerSlider {   flex-direction:column;  }  .sidebar {   flex-direction:row;   overflow-x:auto;   border-right:none;   border-bottom:1px solid #ddd;  }  .tab {   flex:1;   text-align:center;  } }   .slider-wrapper {  position:relative;  max-width:1200px;   box-shadow:0 5px 10px -2px rgba(0, 0, 0, 0.3); }  .slider-wrapper .after {  width:100%;  display:flex; } .slider-wrapper .after img {  width:100%;  pointer-events:none; } .slider-wrapper .before {  position:absolute;  top:0;  left:0;  height:100%;  width:50%;  overflow:hidden; }  .slider-wrapper .before::before, .slider-wrapper .before::after {  content:"";  position:absolute;  right:-2px;  width:4px;  height:calc(50% - 25px);  background:white;  z-index:3; } .slider-wrapper .before::before {  top:0;  box-shadow:0 -3px 8px 1px rgba(0, 0, 0, 0.3); } .slider-wrapper .before::after {  bottom:0;  box-shadow:0 3px 8px 1px rgba(0, 0, 0, 0.3); } .slider-wrapper .before img {  height:100%;  max-width:unset !important; }  .handle {  position:absolute;  height:50px;  width:50px;  top:50%;  left:50%;  transform:translateY(-50%) translateX(-50%);  z-index:1;  background:#000;  border-radius:50px; }  .handle::before, .handle::after {  content:"";  width:0;  height:0;  border:6px inset transparent;  position:absolute;  top:50%;  margin-top:-6px; } .handle::before {  border-right:6px solid white;  left:50%;  margin-left:-17px; } .handle::after {  border-left:6px solid white;  right:50%;  margin-right:-17px; }  input[type="range"] {  -webkit-appearance:none;  -moz-appearance:none;  position:absolute;  top:50%;  left:-25px;  transform:translateY(-50%);  background-color:transparent;  width:calc(100% + 50px);  z-index:2; } input[type="range"]:focus, input[type="range"]:active {  border:none;  outline:none; } input[type="range"]::-webkit-slider-thumb {  -webkit-appearance:none;  border:none;  height:50px;  width:50px;  border-radius:50%;  background:transparent;  border:4px solid white;  box-shadow:0 0 8px 1px rgba(0, 0, 0, 0.3); } input[type="range"]::-moz-range-track {  -moz-appearance:none;  height:15px;  width:100%;  background-color:transparent;  position:relative;  outline:none; } .after {  background-image:url(https://trackme.host/w3speedup-new/wp-content/uploads/2025/07/image-66.png);  background-repeat:no-repeat;  background-size:cover;  background-position:center; } .tab {  background:#eee; } button.tab {   text-align:center; } .samples {   display:flex;   gap:10px; } .samples img {   width:60px;   height:60px;   object-fit:cover;   border-radius:10px; } .sample-images {   max-width:550px;   margin:0 auto;   width:100%; } .sample-images p {   font-weight:500; } .preview-container img {   max-width:500px !important;   max-height:500px;   object-fit:contain;   border-radius:10px; } #addNew{   opacity:0;   transform:translateY(10px);   transition:opacity 0.5s ease, transform 0.5s ease; } #addNew.show {   opacity:1;   transform:translateY(0); }   .samples img:hover {   box-shadow:0 17px 25px rgb(0 0 0 / 23%);   transform:translateY(-2px);   scale:1.1; } .sample-images p {   text-align:center !important; } .samples {   justify-content:center; } .samples img {   box-shadow:1px 1px 7px 0px #00000030;   transition:0.3s;   cursor:pointer; } .sample-images {   padding:10px; }  button.tab {   position:relative; } .containerSlider {   border-radius:10px;   padding:0; } .tab.active {   background:#1e5aba;   color:#ffffff;   z-index:9999;   border-right:0; } .sidebar {   border-radius:10px;   padding:30px 10px; } .containerSlider .content {   padding:3px; } .containerSlider .content {   background:#c4c8ce;   margin:15px;   border-radius:10px 10px 10px 10px; } .slider-wrapper .after {   border-radius:10px; } .slider-wrapper .before {   border-radius:10px; } p.afterBefore-main-heading {   font-size:50px;   text-align:center;   width:100%;   display:flex;   justify-content:center;   color:#000; } .downloadDIv {   margin-bottom:50px; }