/* General Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Inter', sans-serif; }
body { background:#0f172a; color:#fff; line-height:1.6; }
a { text-decoration:none; color:inherit; }

/* Container */
.container { width:90%; max-width:1200px; margin:0 auto; }

/* Header */
header { padding:30px 0; text-align:center; background:#1e293b; }
header h1 { font-size:2.5rem; color:#22c55e; }
header p { font-size:1rem; margin-top:5px; color:#cbd5e1; }

/* Hero Section */
.hero { text-align:center; padding:60px 20px; background:#111827; }
.hero h2 { font-size:2rem; margin-bottom:10px; color:#22c55e; }
.hero p { color:#94a3b8; margin-bottom:20px; }
.btn-primary { background:#22c55e; padding:12px 25px; border-radius:6px; color:#fff; font-weight:600; transition:0.3s; }
.btn-primary:hover { background:#16a34a; }

/* Tools Grid */
.tools { padding:50px 0; }
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap:25px; }

/* Tool Card */
.tool-card { background:#1e293b; border-radius:12px; padding:20px; text-align:center; transition:0.3s; }
.tool-card:hover { transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.3); }
.tool-card img { width:80px; margin-bottom:15px; }
.tool-card h3 { font-size:1.2rem; margin-bottom:10px; color:#22c55e; }
.tool-card p { font-size:0.9rem; color:#cbd5e1; margin-bottom:15px; }
.btn-secondary { display:inline-block; padding:8px 18px; border-radius:6px; background:#22c55e; color:#fff; font-weight:500; transition:0.3s; }
.btn-secondary:hover { background:#16a34a; }

/* Footer */
footer { padding:20px 0; background:#1e293b; text-align:center; color:#94a3b8; font-size:0.9rem; }
footer a { color:#22c55e; }

/* =========================
   FOOTER (UX PRO LEVEL)
========================= */

.stp-footer {
  background: #0f172a;
  color: #e5e7eb;
  margin-top: 60px;
}

.stp-footer-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 40px 20px;
}

.stp-footer-col h3,
.stp-footer-col h4 {
  margin-bottom: 12px;
  color: #ffffff;
}

.stp-footer-col p {
  font-size: 14px;
  line-height: 1.6;
  color: #cbd5e1;
}

.stp-footer-col ul {
  list-style: none;
  padding: 0;
}

.stp-footer-col ul li {
  margin-bottom: 8px;
}

.stp-footer-col ul li a {
  text-decoration: none;
  color: #cbd5e1;
  font-size: 14px;
  transition: 0.3s;
}

.stp-footer-col ul li a:hover {
  color: #00ff9d;
}

.stp-footer-bottom {
  text-align: center;
  padding: 15px;
  border-top: 1px solid #1f2937;
  font-size: 13px;
  color: #94a3b8;
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 900px) {
  .stp-footer-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .stp-footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .stp-footer-col {
    margin-bottom: 20px;
  }
}


/* =========================
          UX
========================= */
.home-content {
  max-width: 100px;
  margin: 10px auto;
  padding: 0 15px;
}

.home-content h2 {
  margin-bottom: 10px;
  font-size: 22px;
}

.home-content p {
  margin-bottom: 12px;
  line-height: 1.7;
  color: #fff;
}

/* TOOL PAGE LAYOUT */

.tool{
display:flex;
justify-content:center;
align-items:flex-start;
margin-top:40px;
}

.tool-box{
background:#1e2a3a;
padding:40px;
border-radius:12px;
text-align:center;
width:420px;
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.tool-box input{
margin-top:15px;
margin-bottom:20px;
}

.tool-box button{
background:#22c55e;
border:none;
padding:10px 18px;
border-radius:6px;
cursor:pointer;
color:white;
font-weight:600;
}

.tool-box button:hover{
opacity:0.9;
}

.preview{
margin-top:25px;
}

.preview img{
max-width:100%;
border-radius:10px;
}

.info{
max-width:700px;
margin:60px auto;
text-align:center;
line-height:1.6;
}

.tool-box textarea{
width:100%;
margin-top:15px;
margin-bottom:20px;
padding:10px;
border-radius:6px;
border:none;
}

.json-output{
background:#1e1e1e;
color:#00ff9d;
padding:20px;
border-radius:8px;
margin-top:15px;
overflow:auto;
white-space:pre-wrap;
font-family:monospace;
font-size:14px;
}

button{
padding:10px 16px;
border:none;
border-radius:6px;
background:#4f7cff;
color:white;
font-weight:600;
cursor:pointer;
margin-right:8px;
}

button:hover{
background:#3a63d8;
}

.output-title{
margin-top:20px;
color:#0f0303;
font-size:20px;
font-weight:600;
}

/* Info section under tools */

.info{
margin-top:60px;
padding:40px;
background:#111;
border-radius:10px;
line-height:1.7;
}

.info h2{
margin-bottom:15px;
font-size:24px;
}

.info p{
margin-bottom:15px;
color:#ddd;
}

/* Small spacing fix for tool pages */

.tool.container{
max-width:700px;
margin:30px auto;
padding:20px;
}

/* input spacing */

.tool input,
.tool select,
.tool textarea{
width:100%;
padding:10px;
margin-top:8px;
margin-bottom:12px;
}

/* button spacing */

.tool button{
margin-top:8px;
margin-right:8px;
padding:8px 14px;
}

/* result text */

.tool p{
margin-top:12px;
}

/* TOOL CARD LUXURY STYLE */

.tool-card{
background: linear-gradient(145deg,#161616,#0e0e0e);
border-radius:12px;
padding:25px;
text-align:center;
transition: all 0.3s ease;
border:1px solid rgba(255,255,255,0.05);
}

.tool-card:hover{
transform: translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.6);
border:1px solid #00ff9d;
}

.tool-card img{
width:50px;
margin-bottom:10px;
}

.tool-card h3{
margin:10px 0;
font-weight:600;
}

.tool-card p{
font-size:14px;
color:#aaa;
}


.tool-card{
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tool-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.35);
}

/* PREMIUM BUTTON */

.btn-secondary{
background:#00ff9d;
color:#000;
padding:10px 18px;
border-radius:6px;
font-weight:600;
text-decoration:none;
transition:0.3s;
display:inline-block;
}

.btn-secondary:hover{
background:#00d784;
transform:scale(1.05);
}


header{
background:#0d0d0d;
border-bottom:1px solid rgba(255,255,255,0.05);
}

header h1{
color:#00ff9d;
letter-spacing:1px;
}

body{
font-family:'Inter',sans-serif;
background:#0b0b0b;
color:#fff;
animation:fadeIn 0.6s ease;
}

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

.tool{
background:linear-gradient(145deg,#141414,#0c0c0c);
border-radius:12px;
padding:25px;
border:1px solid rgba(255,255,255,0.05);
box-shadow:0 5px 20px rgba(0,0,0,0.5);
}

input:focus,
textarea:focus,
select:focus{
outline:none;
border:1px solid #00ff9d;
box-shadow:0 0 6px #00ff9d55;
}

/* Icon style improvement */

.tool-card img{
width:48px;
margin-bottom:12px;
filter: brightness(1.8) contrast(1.2);
transition:0.3s;
}

.tool-card:hover img{
transform:scale(1.1);
filter: brightness(2);
}



/* Accent color glow for all tool cards */

.tool-card:nth-child(1){border-top:3px solid #00ff9d;}
.tool-card:nth-child(2){border-top:3px solid #00c3ff;}
.tool-card:nth-child(3){border-top:3px solid #ffb300;}
.tool-card:nth-child(4){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(5){border-top:3px solid #7c4dff;}
.tool-card:nth-child(6){border-top:3px solid #00ff9d;}
.tool-card:nth-child(7){border-top:3px solid #00c3ff;}
.tool-card:nth-child(8){border-top:3px solid #ffb300;}
.tool-card:nth-child(9){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(10){border-top:3px solid #7c4dff;}
.tool-card:nth-child(11){border-top:3px solid #00ff9d;}
.tool-card:nth-child(12){border-top:3px solid #00c3ff;}
.tool-card:nth-child(13){border-top:3px solid #ffb300;}
.tool-card:nth-child(14){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(15){border-top:3px solid #7c4dff;}
.tool-card:nth-child(16){border-top:3px solid #00ff9d;}
.tool-card:nth-child(17){border-top:3px solid #00c3ff;}
.tool-card:nth-child(18){border-top:3px solid #ffb300;}
.tool-card:nth-child(19){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(20){border-top:3px solid #7c4dff;}

/* Accent colors for cards */

.tool-card{
border-radius:12px;
transition:0.3s;
}

.tool-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.6);
}

body{
background: radial-gradient(circle at top,#111,#070707 60%);
color:#fff;
}

.tool-card img{
background:#353434;
padding:10px;
border-radius:10px;
}


/* Hero upgrade */

.hero{
background: linear-gradient(135deg,#0f2027,#203a43,#2c5364);
padding:80px 20px;
text-align:center;
}

.hero h2{
font-size:36px;
margin-bottom:15px;
}

.hero p{
color:#d6d6d6;
margin-bottom:25px;
}

.tool-card{
background:#111;
padding:25px;
border-radius:12px;
transition:all 0.3s ease;
}

.tool-card:hover{
transform:translateY(-8px);
box-shadow:0 15px 30px rgba(0,0,0,0.6);
}

.tool-card img{
width:48px;
margin-bottom:12px;
filter:brightness(1.4);
transition:0.3s;
}

.tool-card:hover img{
transform:scale(1.1);
}

.btn-secondary{
background:linear-gradient(135deg,#00ff9d,#00c3ff);
color:#000;
padding:10px 18px;
border-radius:8px;
font-weight:600;
text-decoration:none;
transition:0.3s;
}

.btn-secondary:hover{
transform:scale(1.05);
box-shadow:0 5px 15px rgba(0,255,157,0.4);
}

/* Info pages style */

.info{
background:#111;
padding:40px;
border-radius:10px;
margin-top:40px;
}

.info h2{
margin-top:20px;
margin-bottom:10px;
color:#00ff9d;
}

.info p{
line-height:1.7;
color:#ddd;
}

.tool{
max-width:600px;
margin:40px auto;
text-align:center;
}

.tool input{
margin-top:20px;
}

.tool button{
margin-top:15px;
}

.info{
margin-top:40px;
line-height:1.7;
}

/* Tool spacing fix */

.tool input,
.tool select,
.tool textarea,
.tool button {
margin-top:12px;
margin-bottom:12px;
}

.tool button{
margin-right:10px;
}

input[type="file"]{
margin-top:10px;
margin-bottom:15px;
}

.tool label{
display:block;
margin-top:15px;
font-weight:600;
}

.tool input,
.tool select,
.tool textarea{
padding:10px;
border-radius:6px;
border:1px solid #444;
background:#1a1a1a;
color:#fff;
}

.tool{
padding:30px;
border-radius:12px;
}

.tool{
padding:30px;
border-radius:12px;
}

.tool-card:nth-child(1){border-top:3px solid #00ff9d;}
.tool-card:nth-child(2){border-top:3px solid #00c3ff;}
.tool-card:nth-child(3){border-top:3px solid #ffb300;}
.tool-card:nth-child(4){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(5){border-top:3px solid #7c4dff;}

.tool-card:nth-child(6){border-top:3px solid #00ff9d;}
.tool-card:nth-child(7){border-top:3px solid #00c3ff;}
.tool-card:nth-child(8){border-top:3px solid #ffb300;}
.tool-card:nth-child(9){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(10){border-top:3px solid #7c4dff;}

.tool-card:nth-child(11){border-top:3px solid #00ff9d;}
.tool-card:nth-child(12){border-top:3px solid #00c3ff;}
.tool-card:nth-child(13){border-top:3px solid #ffb300;}
.tool-card:nth-child(14){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(15){border-top:3px solid #7c4dff;}

.tool-card:nth-child(16){border-top:3px solid #00ff9d;}
.tool-card:nth-child(17){border-top:3px solid #00c3ff;}
.tool-card:nth-child(18){border-top:3px solid #ffb300;}
.tool-card:nth-child(19){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(20){border-top:3px solid #7c4dff;}

/* new two */

.tool-card:nth-child(21){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(22){border-top:3px solid #7c4dff;}


.tool{
padding:30px;
margin-top:30px;
background:#141414;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.tools-list{
list-style:none;
padding:0;
}

.tools-list li{
margin:10px 0;
}

.tools-list a{
color:#00ff9d;
text-decoration:none;
font-weight:600;
}

.tools-list a:hover{
text-decoration:underline;
}

.tool{
max-width:700px;
margin:40px auto;
padding:30px;
background:#111;
border-radius:12px;
box-shadow:0 0 15px rgba(0,0,0,0.6);
text-align:left;
}

.tool label{
display:block;
margin-top:15px;
margin-bottom:6px;
font-weight:600;
}

.tool input,
.tool select,
.tool button{
width:100%;
max-width:100%;
padding:10px;
margin-bottom:15px;
border-radius:6px;
border:1px solid #444;
}

.tool button{
width:auto;
padding:10px 20px;
cursor:pointer;
}

input[type="file"]{
padding:8px;
background:#1a1a1a;
color:white;
border:1px solid #444;
border-radius:6px;
}

button{
background:#3b82f6;
color:white;
border:none;
font-weight:600;
transition:0.2s;
}

button:hover{
background:#2563eb;
}

/* Tool layout fix */
.tool{
max-width:700px;
margin:40px auto;
padding:30px;
background:#111;
border-radius:12px;
box-shadow:0 0 15px rgba(0,0,0,0.6);
display:flex;
flex-direction:column;
gap:14px;
}

/* Labels */
.tool label{
font-weight:600;
margin-top:5px;
}

/* Inputs */
.tool input,
.tool select,
.tool textarea{
width:100%;
padding:10px;
border-radius:6px;
border:1px solid #444;
background:#1a1a1a;
color:#fff;
}

/* File input fix */
.tool input[type="file"]{
padding:6px;
background:#1a1a1a;
}

/* Buttons */
.tool button{
width:fit-content;
padding:10px 18px;
border:none;
border-radius:6px;
background:#3b82f6;
color:white;
font-weight:600;
cursor:pointer;
margin-top:6px;
}

.tool button:hover{
background:#2563eb;
}



/* Canvas spacing */
.tool canvas{
margin-top:10px;
border-radius:8px;
}

/* Download button */
#downloadLink{
margin-top:10px;
display:inline-block;
}


/* TOOL PAGE ONLY (not homepage) */

.tool-box{
max-width:600px;
margin:40px auto;
padding:30px;
background:#111;
border-radius:12px;
box-shadow:0 0 15px rgba(0,0,0,0.6);
text-align:center;
}


/* Inputs */

.tool-box input{
display:block;
margin:15px auto;
padding:10px;
border-radius:6px;
border:1px solid #444;
background:#1a1a1a;
color:#fff;
}


/* Buttons */

.tool-box button{
display:block;
margin:15px auto;
padding:10px 20px;
border:none;
border-radius:6px;
background:#3b82f6;
color:#fff;
font-weight:600;
cursor:pointer;
}

.tool-box button:hover{
background:#2563eb;
}


.tool input[type="file"]{
display:block;
margin:15px auto;
text-align:center;
}

/* Center tools section */
.tools .container #PDF {
max-width:600px;
margin:40px auto;
padding:30px;
background:#111;
border-radius:12px;
box-shadow:0 0 15px rgba(0,0,0,0.6);
text-align:center;
}

/* Input styling */
.tools input{
display:block;
margin:15px auto;
padding:10px;
border-radius:6px;
border:1px solid #444;
background:#1a1a1a;
color:#fff;
}

/* Button styling */
.tools button{
display:block;
margin:15px auto;
padding:10px 20px;
border:none;
border-radius:6px;
background:#3b82f6;
color:#fff;
font-weight:600;
cursor:pointer;
}

.tools button:hover{
background:#2563eb;
}

/* Tools.html Page Section */

.tools-list{
max-width:900px;
margin:40px auto;
padding:20px;
font-family:'Inter', sans-serif;
}

.tools-list h1{
font-size:36px;
margin-bottom:10px;
text-align:center;
color:#222;
}

.tools-list p{
text-align:center;
color:#555;
margin-bottom:30px;
font-size:16px;
}

.tools-list h2{
margin-top:30px;
margin-bottom:15px;
color:#333;
border-left:4px solid #4CAF50;
padding-left:10px;
font-size:22px;
}

.tools-list ul{
list-style:none;
padding:0;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:10px;
}

.tools-list li{
background:#f5f5f5;
padding:12px;
border-radius:8px;
transition:0.2s;
}

.tools-list li:hover{
background:#e9f7ef;
transform:translateY(-2px);
}

.tools-list a{
text-decoration:none;
color:#333;
font-weight:500;
}

.tools-list a:hover{
color:#2e7d32;
}

#canvas {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}

.tool-box {
    max-width: 500px; /* or 600px */
    margin: auto;
    overflow: hidden;
}

.preview-box {
    background: #222;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}


/* for other tools now */
.info {
    margin-top: 60px;
    padding: 25px;
    background: #111;
    border-radius: 12px;
    line-height: 1.7;
}

.info h2 {
    margin-top: 20px;
    font-size: 1.4rem;
    color: #00ff9d;
}

.info p {
    color: #ccc;
}

.info ol {
    margin-left: 20px;
    color: #ddd;
}

.home-content {
  max-width: 900px;
  margin: 60px auto;
  padding: 20px;
  background: #0f172a;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  color: #e5e7eb;
}

.home-content h2 {
  color: #22c55e;
}

.home-page .content-section {
  background: #0f172a;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
/* =========================
   STP NAVBAR (SAFE UNIQUE)
   ========================= */

#stp-navbar{
  background:#0b0b0b;
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:14px 0;
  position:sticky;
  top:0;
  z-index:999;
}

.stp-nav-container{
  width:90%;
  max-width:1200px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.stp-logo a{
  color:#00ff9d;
  font-size:20px;
  font-weight:700;
  text-decoration:none;
  letter-spacing:0.5px;
}

.stp-nav-links{
  list-style:none;
  display:flex;
  gap:18px;
  margin:0;
  padding:0;
}

.stp-nav-links li a{
  color:#cbd5e1;
  text-decoration:none;
  font-weight:500;
  transition:0.3s;
  font-size:14px;
}

.stp-nav-links li a:hover{
  color:#00ff9d;
}

/* Mobile safe (optional) */
@media(max-width:768px){
  .stp-nav-links{
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
  }
}

body{
  animation: stpFadeIn 0.4s ease;
}

@keyframes stpFadeIn{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}



/* =========================
   FINAL MOBILE NAV FIX (OVERRIDE)
   ========================= */

/* Hide toggle on desktop */
.stp-menu-toggle{
  display:none;
}

/* Desktop menu */
.stp-nav-links{
  display:flex;
  gap:20px;
}

/* MOBILE FIX */
@media (max-width:768px){

  /* Show hamburger */
  .stp-menu-toggle{
    display:block;
    font-size:26px;
    background:none;
    border:none;
    color:#00ff9d;
    cursor:pointer;
  }

  /* Dropdown menu */
  .stp-nav-links{
    position:absolute;
    top:65px;
    right:10px;
    width:220px;
    background:#1e293b;
    flex-direction:column;
    align-items:flex-start;
    padding:15px;
    border-radius:10px;
    box-shadow:0 10px 25px rgba(0,0,0,0.4);
    
    display:none; /* IMPORTANT */
  }

  /* Show when active */
  .stp-nav-links.active{
    display:flex;
  }

  .stp-nav-links li{
    width:100%;
  }

  .stp-nav-links li a{
    display:block;
    width:100%;
    padding:10px;
  }
}


.btn-primary, .btn-secondary{
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.btn-primary:hover, .btn-secondary:hover{
  transform: scale(1.03);
  opacity: 0.95;
}

.tool-card img{
  transition: transform 0.3s ease;
}

.tool-card:hover img{
  transform: scale(1.08);
}

section{
  scroll-margin-top: 80px;
}






/* layout */
.stp-nav-container{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* menu button (hidden on desktop) */
.stp-menu-toggle{
  display:none;
  font-size:26px;
  background:none;
  border:none;
  color:#00ff9d;
  cursor:pointer;
}

/* desktop menu */
.stp-nav-links{
  display:flex;
  gap:20px;
  list-style:none;
}

/* mobile */
@media (max-width:768px){

  .stp-menu-toggle{
    display:block;
  }

  .stp-nav-links{
    display:none;
    flex-direction:column;
    position:absolute;
    top:60px;
    right:10px;
    background:#1e293b;
    width:200px;
    padding:10px;
    border-radius:10px;
    box-shadow:0 10px 25px rgba(0,0,0,0.4);
  }

  .stp-nav-links.active{
    display:flex;
  }

  .stp-nav-links li{
    padding:10px 0;
  }
}

.home-content h2 {
  margin-top: 40px;     /* space above heading */
  margin-bottom: 15px;  /* space below heading */
}

.home-content p {
  margin-bottom: 18px;  /* space between paragraphs */
}

.home-content ul,
.home-content ol {
  margin: 15px 0 20px 20px;
}

.home-content li {
  margin-bottom: 10px;
}

.home-content h2:first-child {
  margin-top: 0;
}
.home-content {
  margin: 60px auto;  /* space between sections */
}






/* =========================
   Image to PDF Content UI
   Unique System: STP I2P v1
========================= */

.stp-content-wrapper {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    line-height: 1.7;
    font-family: 'Inter', sans-serif;
    color: #fff;
}

.stp-content-wrapper h1 {
    font-size: 32px;
    margin-bottom: 10px;
}

.stp-content-wrapper h2 {
    font-size: 22px;
    margin-top: 30px;
    padding-bottom: 5px;
    border-bottom: 2px solid #eee;
}

.stp-content-wrapper p {
    font-size: 16px;
    margin: 10px 0;
}

.stp-content-wrapper ul {
    padding-left: 20px;
}

.stp-content-wrapper ul li {
    margin-bottom: 8px;
}

.stp-content-wrapper strong {
    color: #000;
}

.stp-tool-title {
    font-size: 32px;
    font-weight: 700;
    color: #00ff9d; /* clean green */
    text-align: center;
    margin: 20px 0;
    letter-spacing: 0.5px;
}




/* MAIN CONTENT */
.stp-i2p-full-x77 {
  max-width: 900px;
  margin: auto;
  padding: 20px;
  line-height: 1.7;
}

.stp-i2p-title-x77 {
  text-align: center;
  font-size: 32px;
  color: #00ff9d;
  margin-bottom: 20px;
}

/* FAQ */
.stp-faq-x77 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stp-faq-item-x77 {
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0808;
}

.stp-faq-q-x77 {
  padding: 15px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}

.stp-faq-a-x77 {
  max-height: 0;
  overflow: hidden;
  padding: 0 15px;
  transition: 0.3s;
}

.stp-faq-item-x77.active {
  border: 2px solid #a855f7;
  background: #0c0808;
}

.stp-faq-item-x77.active .stp-faq-a-x77 {
  max-height: 200px;
  padding: 15px;
}





.related-tools-card {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 15px;
}

.related-tools-card a {
  background: linear-gradient(135deg, #007bff, #00c6ff);
  color: white;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: 0.3s;
}

.related-tools-card a:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #0056b3, #0099cc);
}

/* =========================
 PDF MERGE SYSTEM (UX21)
========================= */

.stp-pdfmerge-wrap-ux21 {
  max-width: 900px;
  margin: auto;
  padding: 20px;
  line-height: 1.7;
}

.stp-pdfmerge-title-ux21 {
  text-align: center;
  font-size: 32px;
  color: #00ff9d;
  margin-bottom: 20px;
}

/* FAQ */
.stp-pdfmerge-faq-ux21 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stp-pdfmerge-item-ux21 {
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0808;
}

.stp-pdfmerge-q-ux21 {
  padding: 15px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}

.stp-pdfmerge-a-ux21 {
  max-height: 0;
  overflow: hidden;
  padding: 0 15px;
  transition: 0.3s;
}

.stp-pdfmerge-item-ux21.active {
  border: 2px solid #a855f7;
  background:#0c0808;
}

.stp-pdfmerge-item-ux21.active .stp-pdfmerge-a-ux21 {
  max-height: 200px;
  padding: 15px;
}



/* =========================
 PDF Compressor SYSTEM (UX21)
========================= */

/* WRAPPER */
.stp-pdfcomp-wrap-ux21 {
  margin-top: 40px;
  line-height: 1.7;
}

/* TITLE */
.stp-pdfcomp-title-ux21 {
  color: #00ff9d;
  margin-bottom: 10px;
}

/* WRAPPER */

.stp-pdfcompress-wrap-ux99 {
  max-width: 900px;
  margin: auto;
  padding: 20px;
  line-height: 1.7;
}

.stp-pdfcompress-title-ux99 {
  text-align: center;
  font-size: 32px;
  color: #00ff9d;
  margin-bottom: 20px;
}

/* FAQ */
.stp-pdfcompress-faq-ux99 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stp-pdfcompress-item-ux99 {
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0808;
}

.stp-pdfcompress-q-ux99 {
  padding: 15px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}

.stp-pdfcompress-a-ux99 {
  max-height: 0;
  overflow: hidden;
  padding: 0 15px;
  transition: 0.3s;
}

.stp-pdfcompress-item-ux99.active {
  border: 2px solid #a855f7;
  background:#0c0808;
}

.stp-pdfcompress-item-ux99.active .stp-pdfcompress-a-ux99 {
  max-height: 200px;
  padding: 15px;
}



/* =========================
 PDF SPLIT FAQ SYSTEM (UX77)
========================= */

.stp-pdfsplit-wrap-ux77 {
  margin-top: 40px;
}

.stp-pdfsplit-title-ux77 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* FAQ Container */
.stp-pdfsplit-faq-ux77 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each Item */
.stp-pdfsplit-item-ux77 {
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0808;
}

/* Question */
.stp-pdfsplit-q-ux77 {
  padding: 15px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  color: #fff;
}

/* Answer */
.stp-pdfsplit-a-ux77 {
  max-height: 0;
  overflow: hidden;
  padding: 0 15px;
  transition: all 0.3s ease;
  color: #ccc;
}

/* Active State */
.stp-pdfsplit-item-ux77.active {
  border: 2px solid #a855f7;
}

.stp-pdfsplit-item-ux77.active .stp-pdfsplit-a-ux77 {
  max-height: 200px;
  padding: 15px;
}



/* =========================
 PDF SPLIT FAQ SYSTEM (UX77)
========================= */

.stp-pdftojpg-wrap-ux55 h1 {
 color: #00ff9d;
}

.stp-pdfsplit-wrap-ux77 {
  margin-top: 40px;
}

.stp-pdfsplit-title-ux77 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* FAQ Container */
.stp-pdfsplit-faq-ux77 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each Item */
.stp-pdfsplit-item-ux77 {
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0808;
}

/* Question */
.stp-pdfsplit-q-ux77 {
  padding: 15px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  color: #fff;
}

/* Answer */
.stp-pdfsplit-a-ux77 {
  max-height: 0;
  overflow: hidden;
  padding: 0 15px;
  transition: max-height 0.3s ease, padding 0.3s ease;
  color: #ccc;
}

/* Active */
.stp-pdfsplit-item-ux77.active {
  border: 2px solid #a855f7;
}

.stp-pdfsplit-item-ux77.active .stp-pdfsplit-a-ux77 {
  max-height: 500px; /* BIG FIX */
  padding: 15px;
}




/* =========================
 IMAGE RESIZER CONTENT SYSTEM (UX91)
========================= */

/* Main Wrapper */
.stp-imgresize-wrap-ux91 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-imgresize-wrap-ux91 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-imgresize-wrap-ux91 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Highlight sections (like Why Choose list) */
.stp-imgresize-wrap-ux91 p br {
  margin-bottom: 5px;
}

/* Emoji Feature Blocks */
.stp-imgresize-wrap-ux91 p strong + br {
  display: none;
}

/* Feature lines (emoji + title) */
.stp-imgresize-wrap-ux91 p:has(strong):not(:first-child) {
  margin-top: 10px;
}

/* Step Titles (1,2,3...) */
.stp-imgresize-wrap-ux91 p strong:first-child {
  color: #00ff9d;
}

/* Better spacing for steps */
.stp-imgresize-wrap-ux91 p strong + br + text {
  display: block;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-imgresize-wrap-ux91 {
    padding: 18px;
  }

  .stp-imgresize-wrap-ux91 p {
    font-size: 14px;
  }

  .stp-imgresize-wrap-ux91 p strong {
    font-size: 18px;
  }
}

/* =========================
 IMAGE RESIZER FAQ SYSTEM (X91)
========================= */



.stp-imgresize-wrap-x91 {
  margin-top: 40px;
}

.stp-imgresize-title-x91 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-imgresize-faq-x91 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.stp-imgresize-item-x91 {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0808;
  transition: all 0.3s ease;
}

/* Question */
.stp-imgresize-q-x91 {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Arrow */
.stp-imgresize-q-x91 span {
  transition: transform 0.3s ease;
}

/* Answer */
.stp-imgresize-a-x91 {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #ccc;
  line-height: 1.6;
}

/* Active State */
.stp-imgresize-item-x91.active {
  border: 2px solid #a855f7;
}

/* Open Answer */
.stp-imgresize-item-x91.active .stp-imgresize-a-x91 {
  max-height: 300px;
  padding: 15px 16px;
}

/* Rotate Arrow */
.stp-imgresize-item-x91.active .stp-imgresize-q-x91 span {
  transform: rotate(180deg);
}



/* =========================
 IMAGE RESIZER WHY SECTION (X92)
========================= */

.stp-imgresize-why-x92 {
  margin-top: 50px;
  padding: 30px;
  background: #111;
  border-radius: 16px;
}

/* Title */
.stp-imgresize-why-title-x92 {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
}

/* Subtitle */
.stp-imgresize-why-sub-x92 {
  text-align: center;
  color: #555;
  margin-bottom: 30px;
}

/* Grid */
.stp-imgresize-grid-x92 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Card */
.stp-imgresize-card-x92 {
  display: flex;
  gap: 15px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid #ddd;
  background: #fff;
  transition: all 0.3s ease;
}

/* Hover */
.stp-imgresize-card-x92:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* Icon */
.stp-imgresize-icon-x92 {
  font-size: 20px;
  background: #111;
  padding: 10px;
  border-radius: 10px;
  height: fit-content;
}

/* Text */
.stp-imgresize-card-x92 h3 {
  margin: 0;
  font-size: 16px;
  color: #111;
}

.stp-imgresize-card-x92 p {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-imgresize-grid-x92 {
    grid-template-columns: 1fr;
  }
}


/* =========================
 UNIT CONVERTER FAQ SYSTEM (U91)
========================= */

.stp-unitconv-wrap-u91 {
  margin-top: 40px;
}

.stp-unitconv-title-u91 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-unitconv-faq-u91 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Item */
.stp-unitconv-item-u91 {
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0808;
}

/* Question */
.stp-unitconv-q-u91 {
  padding: 15px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  color: #fff;
}

/* Answer */
.stp-unitconv-a-u91 {
  max-height: 0;
  overflow: hidden;
  padding: 0 15px;
  transition: max-height 0.3s ease, padding 0.3s ease;
  color: #ccc;
}

/* Active */
.stp-unitconv-item-u91.active {
  border: 2px solid #a855f7;
}

.stp-unitconv-item-u91.active .stp-unitconv-a-u91 {
  max-height: 500px;
  padding: 15px;
}



/* =========================
 UNIT CONVERTER CONTENT SYSTEM (U91 FIXED)
========================= */

/* Main Wrapper */
.stp-unitconv-wrap-u91 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-unitconv-wrap-u91 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-unitconv-wrap-u91 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Line spacing fix */
.stp-unitconv-wrap-u91 p br {
  margin-bottom: 5px;
}

/* Remove extra gap after headings */
.stp-unitconv-wrap-u91 p strong + br {
  display: none;
}

/* Step Titles (1,2,3...) */
.stp-unitconv-wrap-u91 p strong:first-child {
  color: #00ff9d;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-unitconv-wrap-u91 {
    padding: 18px;
  }

  .stp-unitconv-wrap-u91 p {
    font-size: 14px;
  }

  .stp-unitconv-wrap-u91 p strong {
    font-size: 18px;
  }
}


/* =========================
 UNIT CONVERTER WHY SECTION (X94)
========================= */


.stp-unitconv-why-x94 {
  margin-top: 50px;
  padding: 30px;
  background: #111;
  border-radius: 16px;
}

/* Title */
.stp-unitconv-why-title-x94 {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
}

/* Subtitle */
.stp-unitconv-why-sub-x94 {
  text-align: center;
  color: #555;
  margin-bottom: 30px;
}

/* Grid */
.stp-unitconv-grid-x94 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Card */
.stp-unitconv-card-x94 {
  display: flex;
  gap: 15px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid #ddd;
  background: #fff;
  transition: all 0.3s ease;
}

/* Hover */
.stp-unitconv-card-x94:hover {
 transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* Icon */
.stp-unitconv-icon-x94 {
  font-size: 20px;
  background: #111;
  padding: 10px;
  border-radius: 10px;
  height: fit-content;
}

/* Text */
.stp-unitconv-card-x94 h3 {
  margin: 0;
  font-size: 16px;
  color: #111;
}

.stp-unitconv-card-x94 p {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-unitconv-grid-x94 {
    grid-template-columns: 1fr;
  }
}


/* =========================
 PASSWORD GENERATOR CONTENT SYSTEM (UX95)
========================= */

/* Main Wrapper */
.stp-pwgen-wrap-ux95 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-pwgen-wrap-ux95 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-pwgen-wrap-ux95 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Highlight sections (like Why Choose list) */
.stp-pwgen-wrap-ux95 p br {
  margin-bottom: 5px;
}

/* Emoji Feature Blocks */
.stp-pwgen-wrap-ux95 p strong + br {
  display: none;
}

/* Feature lines (emoji + title) */
.stp-pwgen-wrap-ux95 p:has(strong):not(:first-child) {
  margin-top: 10px;
}

/* Step Titles (1,2,3...) */
.stp-pwgen-wrap-ux95 p strong:first-child {
  color: #00ff9d;
}

/* Better spacing for steps */
.stp-pwgen-wrap-ux95 p strong + br + text {
  display: block;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-pwgen-wrap-ux95 {
    padding: 18px;
  }

  .stp-pwgen-wrap-ux95 p {
    font-size: 14px;
  }

  .stp-pwgen-wrap-ux95 p strong {
    font-size: 18px;
  }
}




/* =========================
 PASSWORD GENERATOR WHY SECTION (X95)
========================= */

.stp-pwgen-why-x95 {
  margin-top: 50px;
  padding: 30px;
  background: #111;
  border-radius: 16px;
}

/* Title */
.stp-pwgen-why-title-x95 {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
}

/* Subtitle */
.stp-pwgen-why-sub-x95 {
  text-align: center;
  color: #555;
  margin-bottom: 30px;
}

/* Grid */
.stp-pwgen-grid-x95 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Card */
.stp-pwgen-card-x95 {
  display: flex;
  gap: 15px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid #ddd;
  background: #fff;
  transition: all 0.3s ease;
}

/* Hover */
.stp-pwgen-card-x95:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* Icon */
.stp-pwgen-icon-x95 {
  font-size: 20px;
  background: #111;
  padding: 10px;
  border-radius: 10px;
  height: fit-content;
}

/* Text */
.stp-pwgen-card-x95 h3 {
  margin: 0;
  font-size: 16px;
  color: #111;
}

.stp-pwgen-card-x95 p {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-pwgen-grid-x95 {
    grid-template-columns: 1fr;
  }
}



/* =========================
Password Generator FAQ
========================= */

.stp-pwgen-wrap-x96 {
  margin-top: 40px;
}

.stp-pwgen-title-x96 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-pwgen-faq-x96 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.stp-pwgen-item-x96 {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0808;
  transition: all 0.3s ease;
}

/* Question */
.stp-pwgen-q-x96 {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Arrow */
.stp-pwgen-q-x96 span {
  transition: transform 0.3s ease;
}

/* Answer */
.stp-pwgen-a-x96 {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #ccc;
  line-height: 1.6;
}

/* Active State */
.stp-pwgen-item-x96.active {
  border: 2px solid #a855f7;
}

/* Open Answer */
.stp-pwgen-item-x96.active .stp-pwgen-a-x96 {
  max-height: 300px;
  padding: 15px 16px;
}

/* Rotate Arrow */
.stp-pwgen-item-x96.active .stp-pwgen-q-x96 span {
  transform: rotate(180deg);
}



/* =========================
QR Code Generator
========================= */

/* Main Wrapper */
.stp-qrcode-wrap-ux98 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-qrcode-wrap-ux98 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-qrcode-wrap-ux98 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Highlight sections (like Why Choose list) */
.stp-qrcode-wrap-ux98 p br {
  margin-bottom: 5px;
}

/* Emoji Feature Blocks */
.stp-qrcode-wrap-ux98 p strong + br {
  display: none;
}

/* Feature lines (emoji + title) */
.stp-qrcode-wrap-ux98 p:has(strong):not(:first-child) {
  margin-top: 10px;
}

/* Step Titles (1,2,3...) */
.stp-qrcode-wrap-ux98 p strong:first-child {
  color: #00ff9d;
}

/* Better spacing for steps */
.stp-qrcode-wrap-ux98 p strong + br + text {
  display: block;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-qrcode-wrap-ux98 {
    padding: 18px;
  }

  .stp-qrcode-wrap-ux98 p {
    font-size: 14px;
  }

  .stp-qrcode-wrap-ux98 p strong {
    font-size: 18px;
  }
}


/* =========================
 QR CODE GENERATOR WHY SECTION (X96)
========================= */

.stp-qrcode-why-x96 {
  margin-top: 50px;
  padding: 30px;
  background: #111;
  border-radius: 16px;
}

/* Title */
.stp-qrcode-why-title-x96 {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
}

/* Subtitle */
.stp-qrcode-why-sub-x96 {
  text-align: center;
  color: #555;
  margin-bottom: 30px;
}

/* Grid */
.stp-qrcode-grid-x96 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Card */
.stp-qrcode-card-x96 {
  display: flex;
  gap: 15px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid #ddd;
  background: #fff;
  transition: all 0.3s ease;
}

/* Hover */
.stp-qrcode-card-x96:hover {
 transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* Icon */
.stp-qrcode-icon-x96 {
  font-size: 20px;
  background: #111;
  padding: 10px;
  border-radius: 10px;
  height: fit-content;
}

/* Text */
.stp-qrcode-card-x96 h3 {
  margin: 0;
  font-size: 16px;
  color: #111;
}

.stp-qrcode-card-x96 p {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-qrcode-grid-x96 {
    grid-template-columns: 1fr;
  }
}


/* =========================
 QR CODE FAQ SYSTEM (X97)
========================= */

.stp-qrcode-wrap-x97 {
  margin-top: 40px;
}

.stp-qrcode-title-x97 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-qrcode-faq-x97 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.stp-qrcode-item-x97 {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0808;
  transition: all 0.3s ease;
}

/* Question */
.stp-qrcode-q-x97 {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Arrow */
.stp-qrcode-q-x97 span {
  transition: transform 0.3s ease;
}

/* Answer */
.stp-qrcode-a-x97 {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #ccc;
  line-height: 1.6;
}

/* Active State */
.stp-qrcode-item-x97.active {
  border: 2px solid #a855f7;
}

/* Open Answer */
.stp-qrcode-item-x97.active .stp-qrcode-a-x97 {
  max-height: 300px;
  padding: 15px 16px;
}

/* Rotate Arrow */
.stp-qrcode-item-x97.active .stp-qrcode-q-x97 span {
  transform: rotate(180deg);
}

/* =========================
 IMAGE COMPRESSOR CONTENT SYSTEM (UX97)
========================= */

/* Main Wrapper */
.stp-imgcompress-wrap-ux97 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-imgcompress-wrap-ux97 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-imgcompress-wrap-ux97 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Highlight sections (like Why Choose list) */
.stp-imgcompress-wrap-ux97 p br {
  margin-bottom: 5px;
}

/* Emoji Feature Blocks */
.stp-imgcompress-wrap-ux97 p strong + br {
  display: none;
}

/* Feature lines (emoji + title) */
.stp-imgcompress-wrap-ux97 p:has(strong):not(:first-child) {
  margin-top: 10px;
}

/* Step Titles (1,2,3...) */
.stp-imgcompress-wrap-ux97 p strong:first-child {
  color: #00ff9d;
}

/* Better spacing for steps */
.stp-imgcompress-wrap-ux97 p strong + br + text {
  display: block;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-imgcompress-wrap-ux97 {
    padding: 18px;
  }

  .stp-imgcompress-wrap-ux97 p {
    font-size: 14px;
  }

  .stp-imgcompress-wrap-ux97 p strong {
    font-size: 18px;
  }
}


/* =========================
 IMAGE COMPRESSOR WHY SECTION (UXA1)
========================= */

.stp-imgcompress-why-uxa1 {
  margin-top: 50px;
  padding: 30px;
  background: #111;
  border-radius: 16px;
}

/* Title */
.stp-imgcompress-why-title-uxa1 {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
}

/* Subtitle */
.stp-imgcompress-why-sub-uxa1 {
  text-align: center;
  color: #555;
  margin-bottom: 30px;
}

/* Grid */
.stp-imgcompress-grid-uxa1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Card */
.stp-imgcompress-card-uxa1 {
  display: flex;
  gap: 15px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid #ddd;
  background: #fff;
  transition: all 0.3s ease;
}

/* Hover */
.stp-imgcompress-card-uxa1:hover {
 transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* Icon */
.stp-imgcompress-icon-uxa1 {
  font-size: 20px;
  background: #111;
  padding: 10px;
  border-radius: 10px;
  height: fit-content;
}

/* Text */
.stp-imgcompress-card-uxa1 h3 {
  margin: 0;
  font-size: 16px;
  color: #111;
}

.stp-imgcompress-card-uxa1 p {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-imgcompress-grid-uxa1 {
    grid-template-columns: 1fr;
  }
}


/* =========================
 IMAGE COMPRESSOR FAQ SYSTEM (UXA1)
========================= */

.stp-imgcompress-wrap-uxA1 {
  margin-top: 40px;
}

.stp-imgcompress-title-uxA1 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-imgcompress-faq-uxA1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.stp-imgcompress-item-uxA1 {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0808;
  transition: all 0.3s ease;
}

/* Question */
.stp-imgcompress-q-uxA1 {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Arrow */
.stp-imgcompress-q-uxA1 span {
  transition: transform 0.3s ease;
}

/* Answer */
.stp-imgcompress-a-uxA1 {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #ccc;
  line-height: 1.6;
}

/* Active State */
.stp-imgcompress-item-uxA1.active {
  border: 2px solid #a855f7;
}

/* Open Answer */
.stp-imgcompress-item-uxA1.active .stp-imgcompress-a-uxA1 {
  max-height: 300px;
  padding: 15px 16px;
}

/* Rotate Arrow */
.stp-imgcompress-item-uxA1.active .stp-imgcompress-q-uxA1 span {
  transform: rotate(180deg);
}


/* =========================
 WORD COUNTER CONTENT SYSTEM (UXB1)
========================= */

/* Main Wrapper */
.stp-wordcount-wrap-uxB1 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-wordcount-wrap-uxB1 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-wordcount-wrap-uxB1 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Highlight sections (like Why Choose list) */
.stp-wordcount-wrap-uxB1 p br {
  margin-bottom: 5px;
}

/* Emoji Feature Blocks */
.stp-wordcount-wrap-uxB1 p strong + br {
  display: none;
}

/* Feature lines (emoji + title) */
.stp-wordcount-wrap-uxB1 p:has(strong):not(:first-child) {
  margin-top: 10px;
}

/* Step Titles (1,2,3...) */
.stp-wordcount-wrap-uxB1 p strong:first-child {
  color: #00ff9d;
}

/* Better spacing for steps */
.stp-wordcount-wrap-uxB1 p strong + br + text {
  display: block;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-wordcount-wrap-uxB1 {
    padding: 18px;
  }

  .stp-wordcount-wrap-uxB1 p {
    font-size: 14px;
  }

  .stp-wordcount-wrap-uxB1 p strong {
    font-size: 18px;
  }
}



/* =========================
 WORD COUNTER WHY SECTION (UXB1)
========================= */

.stp-wordcount-why-uxB2 {
  margin-top: 50px;
  padding: 30px;
  background: #111;
  border-radius: 16px;
}

/* Title */
.stp-wordcount-why-title-uxB2 {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
}

/* Subtitle */
.stp-wordcount-why-sub-uxB2 {
  text-align: center;
  color: #555;
  margin-bottom: 30px;
}

/* Grid */
.stp-wordcount-grid-uxB2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Card */
.stp-wordcount-card-uxB2 {
  display: flex;
  gap: 15px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid #ddd;
  background: #fff;
  transition: all 0.3s ease;
}

/* Hover */
.stp-wordcount-card-uxB2:hover {
 transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* Icon */
.stp-wordcount-icon-uxB2 {
  font-size: 20px;
  background: #111;
  padding: 10px;
  border-radius: 10px;
  height: fit-content;
}

/* Text */
.stp-wordcount-card-uxB2 h3 {
  margin: 0;
  font-size: 16px;
  color: #111;
}

.stp-wordcount-card-uxB2 p {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-wordcount-grid-uxB2 {
    grid-template-columns: 1fr;
  }
}


/* =========================
 IMAGE COMPRESSOR FAQ SYSTEM (UXA2)
========================= */

.stp-imgcompress-wrap-uxa2 {
  margin-top: 40px;
}

.stp-imgcompress-title-uxa2 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-imgcompress-faq-uxa2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.stp-imgcompress-item-uxa2 {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0808;
  transition: all 0.3s ease;
}

/* Question */
.stp-imgcompress-q-uxa2 {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Arrow */
.stp-imgcompress-q-uxa2 span {
  transition: transform 0.3s ease;
}

/* Answer */
.stp-imgcompress-a-uxa2 {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #ccc;
  line-height: 1.6;
}

/* Active State */
.stp-imgcompress-item-uxa2.active {
  border: 2px solid #a855f7;
}

/* Open Answer */
.stp-imgcompress-item-uxa2.active .stp-imgcompress-a-uxa2 {
  max-height: 300px;
  padding: 15px 16px;
}

/* Rotate Arrow */
.stp-imgcompress-item-uxa2.active .stp-imgcompress-q-uxa2 span {
  transform: rotate(180deg);
}


/* =========================
 TEXT CASE CONVERTER CONTENT SYSTEM (UXC1)
========================= */

/* Main Wrapper */
.stp-textcase-wrap-uxC1 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-textcase-wrap-uxC1 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-textcase-wrap-uxC1 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Highlight sections (like Why Choose list) */
.stp-textcase-wrap-uxC1 p br {
  margin-bottom: 5px;
}

/* Emoji Feature Blocks */
.stp-textcase-wrap-uxC1 p strong + br {
  display: none;
}

/* Feature lines (emoji + title) */
.stp-textcase-wrap-uxC1 p:has(strong):not(:first-child) {
  margin-top: 10px;
}

/* Step Titles (1,2,3...) */
.stp-textcase-wrap-uxC1 p strong:first-child {
  color: #00ff9d;
}

/* Better spacing for steps */
.stp-textcase-wrap-uxC1 p strong + br + text {
  display: block;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-textcase-wrap-uxC1 {
    padding: 18px;
  }

  .stp-textcase-wrap-uxC1 p {
    font-size: 14px;
  }

  .stp-textcase-wrap-uxC1 p strong {
    font-size: 18px;
  }
}


/* =========================
 TEXT CASE CONVERTER FAQ SYSTEM (XC1)
========================= */

.stp-textcase-wrap-xc1 {
  margin-top: 40px;
}

.stp-textcase-title-xc1 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-textcase-faq-xc1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.stp-textcase-item-xc1 {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0808;
  transition: all 0.3s ease;
}

/* Question */
.stp-textcase-q-xc1 {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Arrow */
.stp-textcase-q-xc1 span {
  transition: transform 0.3s ease;
}

/* Answer */
.stp-textcase-a-xc1 {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #ccc;
  line-height: 1.6;
}

/* Active State */
.stp-textcase-item-xc1.active {
  border: 2px solid #a855f7;
}

/* Open Answer */
.stp-textcase-item-xc1.active .stp-textcase-a-xc1 {
  max-height: 300px;
  padding: 15px 16px;
}

/* Rotate Arrow */
.stp-textcase-item-xc1.active .stp-textcase-q-xc1 span {
  transform: rotate(180deg);
}


/* =========================
 RANDOM NUMBER CONTENT SYSTEM (UXD1)
========================= */

/* Main Wrapper */
.stp-randomnum-wrap-uxD1 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-randomnum-wrap-uxD1 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-randomnum-wrap-uxD1 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Highlight sections (like Why Choose list) */
.stp-randomnum-wrap-uxD1 p br {
  margin-bottom: 5px;
}

/* Emoji Feature Blocks */
.stp-randomnum-wrap-uxD1 p strong + br {
  display: none;
}

/* Feature lines (emoji + title) */
.stp-randomnum-wrap-uxD1 p:has(strong):not(:first-child) {
  margin-top: 10px;
}

/* Step Titles (1,2,3...) */
.stp-randomnum-wrap-uxD1 p strong:first-child {
  color: #00ff9d;
}

/* Better spacing for steps */
.stp-randomnum-wrap-uxD1 p strong + br + text {
  display: block;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-randomnum-wrap-uxD1 {
    padding: 18px;
  }

  .stp-randomnum-wrap-uxD1 p {
    font-size: 14px;
  }

  .stp-randomnum-wrap-uxD1 p strong {
    font-size: 18px;
  }
}

/* =========================
 RANDOM NUMBER FAQ SYSTEM (XD1)
========================= */

.stp-randomnum-wrap-xd1 {
  margin-top: 40px;
}

.stp-randomnum-title-xd1 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-randomnum-faq-xd1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.stp-randomnum-item-xd1 {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0808;
  transition: all 0.3s ease;
}

/* Question */
.stp-randomnum-q-xd1 {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Arrow */
.stp-randomnum-q-xd1 span {
  transition: transform 0.3s ease;
}

/* Answer */
.stp-randomnum-a-xd1 {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #ccc;
  line-height: 1.6;
}

/* Active State */
.stp-randomnum-item-xd1.active {
  border: 2px solid #a855f7;
}

/* Open Answer */
.stp-randomnum-item-xd1.active .stp-randomnum-a-xd1 {
  max-height: 300px;
  padding: 15px 16px;
}

/* Rotate Arrow */
.stp-randomnum-item-xd1.active .stp-randomnum-q-xd1 span {
  transform: rotate(180deg);
}


/* =========================
 COLOR PALETTE CONTENT SYSTEM (UXE1)
========================= */

/* Main Wrapper */
.stp-colorpalette-wrap-uxE1 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-colorpalette-wrap-uxE1 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-colorpalette-wrap-uxE1 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Highlight sections (like Why Choose list) */
.stp-colorpalette-wrap-uxE1 p br {
  margin-bottom: 5px;
}

/* Emoji Feature Blocks */
.stp-colorpalette-wrap-uxE1 p strong + br {
  display: none;
}

/* Feature lines (emoji + title) */
.stp-colorpalette-wrap-uxE1 p:has(strong):not(:first-child) {
  margin-top: 10px;
}

/* Step Titles (1,2,3...) */
.stp-colorpalette-wrap-uxE1 p strong:first-child {
  color: #00ff9d;
}

/* Better spacing for steps */
.stp-colorpalette-wrap-uxE1 p strong + br + text {
  display: block;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-colorpalette-wrap-uxE1 {
    padding: 18px;
  }

  .stp-colorpalette-wrap-uxE1 p {
    font-size: 14px;
  }

  .stp-colorpalette-wrap-uxE1 p strong {
    font-size: 18px;
  }
}


/* =========================
 COLOR PALETTE FAQ SYSTEM (XE1)
========================= */

.stp-colorpalette-wrap-xe1 {
  margin-top: 40px;
}

.stp-colorpalette-title-xe1 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-colorpalette-faq-xe1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.stp-colorpalette-item-xe1 {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0808;
  transition: all 0.3s ease;
}

/* Question */
.stp-colorpalette-q-xe1 {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Arrow */
.stp-colorpalette-q-xe1 span {
  transition: transform 0.3s ease;
}

/* Answer */
.stp-colorpalette-a-xe1 {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #ccc;
  line-height: 1.6;
}

/* Active State */
.stp-colorpalette-item-xe1.active {
  border: 2px solid #a855f7;
}

/* Open Answer */
.stp-colorpalette-item-xe1.active .stp-colorpalette-a-xe1 {
  max-height: 300px;
  padding: 15px 16px;
}

/* Rotate Arrow */
.stp-colorpalette-item-xe1.active .stp-colorpalette-q-xe1 span {
  transform: rotate(180deg);
}


/* =========================
 JSON FORMATTER CONTENT SYSTEM (UXF1)
========================= */

/* Main Wrapper */
.stp-jsonformat-wrap-uxF1 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-jsonformat-wrap-uxF1 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-jsonformat-wrap-uxF1 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Highlight sections (like Why Choose list) */
.stp-jsonformat-wrap-uxF1 p br {
  margin-bottom: 5px;
}

/* Emoji Feature Blocks */
.stp-jsonformat-wrap-uxF1 p strong + br {
  display: none;
}

/* Feature lines (emoji + title) */
.stp-jsonformat-wrap-uxF1 p:has(strong):not(:first-child) {
  margin-top: 10px;
}

/* Step Titles (1,2,3...) */
.stp-jsonformat-wrap-uxF1 p strong:first-child {
  color: #00ff9d;
}

/* Better spacing for steps */
.stp-jsonformat-wrap-uxF1 p strong + br + text {
  display: block;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-jsonformat-wrap-uxF1 {
    padding: 18px;
  }

  .stp-jsonformat-wrap-uxF1 p {
    font-size: 14px;
  }

  .stp-jsonformat-wrap-uxF1 p strong {
    font-size: 18px;
  }
}

/* =========================
 JSON FORMATTER WHY SECTION (UXF2)
========================= */

.stp-jsonformat-why-uxf2 {
  margin-top: 50px;
  padding: 30px;
  background: #111;
  border-radius: 16px;
}

/* Title */
.stp-jsonformat-why-title-uxf2 {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
}

/* Subtitle */
.stp-jsonformat-why-sub-uxf2 {
  text-align: center;
  color: #555;
  margin-bottom: 30px;
}

/* Grid */
.stp-jsonformat-grid-uxf2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Card */
.stp-jsonformat-card-uxf2 {
  display: flex;
  gap: 15px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid #ddd;
  background: #fff;
  transition: all 0.3s ease;
}

/* Hover */
.stp-jsonformat-card-uxf2:hover {
 transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* Icon */
.stp-jsonformat-icon-uxf2 {
  font-size: 20px;
  background: #111;
  padding: 10px;
  border-radius: 10px;
  height: fit-content;
}

/* Text */
.stp-jsonformat-card-uxf2 h3 {
  margin: 0;
  font-size: 16px;
  color: #111;
}

.stp-jsonformat-card-uxf2 p {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-jsonformat-grid-uxf2 {
    grid-template-columns: 1fr;
  }
}


/* =========================
 JSON FORMATTER FAQ SYSTEM (UXF3)
========================= */

.stp-jsonformat-wrap-uxf3 {
  margin-top: 40px;
}

.stp-jsonformat-title-uxf3 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-jsonformat-faq-uxf3 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.stp-jsonformat-item-uxf3 {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0808;
  transition: all 0.3s ease;
}

/* Question */
.stp-jsonformat-q-uxf3 {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Arrow */
.stp-jsonformat-q-uxf3 span {
  transition: transform 0.3s ease;
}

/* Answer */
.stp-jsonformat-a-uxf3 {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #ccc;
  line-height: 1.6;
}

/* Active State */
.stp-jsonformat-item-uxf3.active {
  border: 2px solid #a855f7;
}

/* Open Answer */
.stp-jsonformat-item-uxf3.active .stp-jsonformat-a-uxf3 {
  max-height: 300px;
  padding: 15px 16px;
}

/* Rotate Arrow */
.stp-jsonformat-item-uxf3.active .stp-jsonformat-q-uxf3 span {
  transform: rotate(180deg);
}


/* =========================
 UUID GENERATOR CONTENT SYSTEM (UXG1)
========================= */

/* Main Wrapper */
.stp-uuidgen-wrap-uxG1 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-uuidgen-wrap-uxG1 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-uuidgen-wrap-uxG1 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Highlight sections (like Why Choose list) */
.stp-uuidgen-wrap-uxG1 p br {
  margin-bottom: 5px;
}

/* Emoji Feature Blocks */
.stp-uuidgen-wrap-uxG1 p strong + br {
  display: none;
}

/* Feature lines (emoji + title) */
.stp-uuidgen-wrap-uxG1 p:has(strong):not(:first-child) {
  margin-top: 10px;
}

/* Step Titles (1,2,3...) */
.stp-uuidgen-wrap-uxG1 p strong:first-child {
  color: #00ff9d;
}

/* Better spacing for steps */
.stp-uuidgen-wrap-uxG1 p strong + br + text {
  display: block;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-uuidgen-wrap-uxG1 {
    padding: 18px;
  }

  .stp-uuidgen-wrap-uxG1 p {
    font-size: 14px;
  }

  .stp-uuidgen-wrap-uxG1 p strong {
    font-size: 18px;
  }
}


/* =========================
 UNIT CONVERTER WHY SECTION (X94)
========================= */


.stp-uuidgen-why-xG2 {
  margin-top: 50px;
  padding: 30px;
  background: #111;
  border-radius: 16px;
}

/* Title */
.stp-uuidgen-why-title-xG2 {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
}

/* Subtitle */
.stp-uuidgen-why-sub-xG2 {
  text-align: center;
  color: #555;
  margin-bottom: 30px;
}

/* Grid */
.stp-uuidgen-grid-xG2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Card */
.stp-uuidgen-card-xG2 {
  display: flex;
  gap: 15px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid #ddd;
  background: #fff;
  transition: all 0.3s ease;
}

/* Hover */
.stp-uuidgen-card-xG2:hover {
 transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* Icon */
.stp-uuidgen-icon-xG2 {
  font-size: 20px;
  background: #111;
  padding: 10px;
  border-radius: 10px;
  height: fit-content;
}

/* Text */
.stp-uuidgen-card-xG2 h3 {
  margin: 0;
  font-size: 16px;
  color: #111;
}

.stp-uuidgen-card-xG2 p {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-uuidgen-grid-xG2 {
    grid-template-columns: 1fr;
  }
}


/* =========================
 UUID GENERATOR FAQ SYSTEM (XG1)
========================= */

.stp-uuidgen-wrap-xG1 {
  margin-top: 40px;
}

.stp-uuidgen-title-xG1 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-uuidgen-faq-xG1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.stp-uuidgen-item-xG1 {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0808;
  transition: all 0.3s ease;
}

/* Question */
.stp-uuidgen-q-xG1 {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Arrow */
.stp-uuidgen-q-xG1 span {
  transition: transform 0.3s ease;
}

/* Answer */
.stp-uuidgen-a-xG1 {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #ccc;
  line-height: 1.6;
}

/* Active State */
.stp-uuidgen-item-xG1.active {
  border: 2px solid #a855f7;
}

/* Open Answer */
.stp-uuidgen-item-xG1.active .stp-uuidgen-a-xG1 {
  max-height: 300px;
  padding: 15px 16px;
}

/* Rotate Arrow */
.stp-uuidgen-item-xG1.active .stp-uuidgen-q-xG1 span {
  transform: rotate(180deg);
}


/* =========================
 IMAGE RESIZER CONTENT SYSTEM (UX91)
========================= */

/* Main Wrapper */
.stp-timezone-wrap-uxH1 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-timezone-wrap-uxH1 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-timezone-wrap-uxH1 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Highlight sections (like Why Choose list) */
.stp-timezone-wrap-uxH1 p br {
  margin-bottom: 5px;
}

/* Emoji Feature Blocks */
.stp-timezone-wrap-uxH1 p strong + br {
  display: none;
}

/* Feature lines (emoji + title) */
.stp-timezone-wrap-uxH1 p:has(strong):not(:first-child) {
  margin-top: 10px;
}

/* Step Titles (1,2,3...) */
.stp-timezone-wrap-uxH1 p strong:first-child {
  color: #00ff9d;
}

/* Better spacing for steps */
.stp-timezone-wrap-uxH1 p strong + br + text {
  display: block;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-timezone-wrap-uxH1 {
    padding: 18px;
  }

  .stp-timezone-wrap-uxH1 p {
    font-size: 14px;
  }

  .stp-timezone-wrap-uxH1 p strong {
    font-size: 18px;
  }
}


/* =========================
 TIME ZONE CONVERTER FAQ SYSTEM (XH1)
========================= */

.stp-timezone-wrap-xH1 {
  margin-top: 40px;
}

.stp-timezone-title-xH1 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-timezone-faq-xH1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.stp-timezone-item-xH1 {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0808;
  transition: all 0.3s ease;
}

/* Question */
.stp-timezone-q-xH1 {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Arrow */
.stp-timezone-q-xH1 span {
  transition: transform 0.3s ease;
}

/* Answer */
.stp-timezone-a-xH1 {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #ccc;
  line-height: 1.6;
}

/* Active State */
.stp-timezone-item-xH1.active {
  border: 2px solid #a855f7;
}

/* Open Answer */
.stp-timezone-item-xH1.active .stp-timezone-a-xH1 {
  max-height: 300px;
  padding: 15px 16px;
}

/* Rotate Arrow */
.stp-timezone-item-xH1.active .stp-timezone-q-xH1 span {
  transform: rotate(180deg);
}

/* =========================
 CURRENCY CONVERTER CONTENT SYSTEM (UXJ1)
========================= */

/* Main Wrapper */
.stp-currency-wrap-uxJ1 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-currency-wrap-uxJ1 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-currency-wrap-uxJ1 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Highlight sections (like Why Choose list) */
.stp-currency-wrap-uxJ1 p br {
  margin-bottom: 5px;
}

/* Emoji Feature Blocks */
.stp-currency-wrap-uxJ1 p strong + br {
  display: none;
}

/* Feature lines (emoji + title) */
.stp-currency-wrap-uxJ1 p:has(strong):not(:first-child) {
  margin-top: 10px;
}

/* Step Titles (1,2,3...) */
.stp-currency-wrap-uxJ1 p strong:first-child {
  color: #00ff9d;
}

/* Better spacing for steps */
.stp-currency-wrap-uxJ1 p strong + br + text {
  display: block;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-currency-wrap-uxJ1 {
    padding: 18px;
  }

  .stp-currency-wrap-uxJ1 p {
    font-size: 14px;
  }

  .stp-currency-wrap-uxJ1 p strong {
    font-size: 18px;
  }
}

/* =========================
 CURRENCY CONVERTER FAQ SYSTEM (XJ1)
========================= */

.stp-currency-wrap-xJ1 {
  margin-top: 40px;
}

.stp-currency-title-xJ1 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-currency-faq-xJ1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.stp-currency-item-xJ1 {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0808;
  transition: all 0.3s ease;
}

/* Question */
.stp-currency-q-xJ1 {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Arrow */
.stp-currency-q-xJ1 span {
  transition: transform 0.3s ease;
}

/* Answer */
.stp-currency-a-xJ1 {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #ccc;
  line-height: 1.6;
}

/* Active State */
.stp-currency-item-xJ1.active {
  border: 2px solid #a855f7;
}

/* Open Answer */
.stp-currency-item-xJ1.active .stp-currency-a-xJ1 {
  max-height: 300px;
  padding: 15px 16px;
}

/* Rotate Arrow */
.stp-currency-item-xJ1.active .stp-currency-q-xJ1 span {
  transform: rotate(180deg);
}

/* =========================
 IMAGE FORMAT CONVERTER CONTENT SYSTEM (UXK1)
========================= */

/* Main Wrapper */
.stp-imgformat-wrap-uxK1 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-imgformat-wrap-uxK1 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-imgformat-wrap-uxK1 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Highlight sections (like Why Choose list) */
.stp-imgformat-wrap-uxK1 p br {
  margin-bottom: 5px;
}

/* Emoji Feature Blocks */
.stp-imgformat-wrap-uxK1 p strong + br {
  display: none;
}

/* Feature lines (emoji + title) */
.stp-imgformat-wrap-uxK1 p:has(strong):not(:first-child) {
  margin-top: 10px;
}

/* Step Titles (1,2,3...) */
.stp-imgformat-wrap-uxK1 p strong:first-child {
  color: #00ff9d;
}

/* Better spacing for steps */
.stp-imgformat-wrap-uxK1 p strong + br + text {
  display: block;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-imgformat-wrap-uxK1 {
    padding: 18px;
  }

  .stp-imgformat-wrap-uxK1 p {
    font-size: 14px;
  }

  .stp-imgformat-wrap-uxK1 p strong {
    font-size: 18px;
  }
}


/* =========================
 IMAGE FORMAT CONVERTER WHY SECTION (XK2)
========================= */

.stp-imgformat-why-xK2 {
  margin-top: 50px;
  padding: 30px;
  background: #111;
  border-radius: 16px;
}

/* Title */
.stp-imgformat-why-title-xK2 {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
}

/* Subtitle */
.stp-imgformat-why-sub-xK2 {
  text-align: center;
  color: #555;
  margin-bottom: 30px;
}

/* Grid */
.stp-imgformat-grid-xK2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Card */
.stp-imgformat-card-xK2 {
  display: flex;
  gap: 15px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid #ddd;
  background: #fff;
  transition: all 0.3s ease;
}

/* Hover */
.stp-imgformat-card-xK2:hover {
 transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* Icon */
.stp-imgformat-icon-xK2 {
  font-size: 20px;
  background: #111;
  padding: 10px;
  border-radius: 10px;
  height: fit-content;
}

/* Text */
.stp-imgformat-card-xK2 h3 {
  margin: 0;
  font-size: 16px;
  color: #111;
}

.stp-imgformat-card-xK2 p {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-imgformat-grid-xK2 {
    grid-template-columns: 1fr;
  }
}

/* =========================
 IMAGE FORMAT CONVERTER FAQ SYSTEM (XK3)
========================= */

.stp-imgformat-wrap-xK3 {
  margin-top: 40px;
}

.stp-imgformat-title-xK3 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-imgformat-faq-xK3 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.stp-imgformat-item-xK3 {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0808;
  transition: all 0.3s ease;
}

/* Question */
.stp-imgformat-q-xK3 {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Arrow */
.stp-imgformat-q-xK3 span {
  transition: transform 0.3s ease;
}

/* Answer */
.stp-imgformat-a-xK3 {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #ccc;
  line-height: 1.6;
}

/* Active State */
.stp-imgformat-item-xK3.active {
  border: 2px solid #a855f7;
}

/* Open Answer */
.stp-imgformat-item-xK3.active .stp-imgformat-a-xK3 {
  max-height: 300px;
  padding: 15px 16px;
}

/* Rotate Arrow */
.stp-imgformat-item-xK3.active .stp-imgformat-q-xK3 span {
  transform: rotate(180deg);
}

/* =========================
 YOUTUBE THUMBNAIL DOWNLOADER CONTENT SYSTEM (UXL1)
========================= */

/* Main Wrapper */
.stp-ytthumb-wrap-uxL1 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-ytthumb-wrap-uxL1 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-ytthumb-wrap-uxL1 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Highlight sections (like Why Choose list) */
.stp-ytthumb-wrap-uxL1 p br {
  margin-bottom: 5px;
}

/* Emoji Feature Blocks */
.stp-ytthumb-wrap-uxL1 p strong + br {
  display: none;
}

/* Feature lines (emoji + title) */
.stp-ytthumb-wrap-uxL1 p:has(strong):not(:first-child) {
  margin-top: 10px;
}

/* Step Titles (1,2,3...) */
.stp-ytthumb-wrap-uxL1 p strong:first-child {
  color: #00ff9d;
}

/* Better spacing for steps */
.stp-ytthumb-wrap-uxL1 p strong + br + text {
  display: block;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-ytthumb-wrap-uxL1 {
    padding: 18px;
  }

  .stp-ytthumb-wrap-uxL1 p {
    font-size: 14px;
  }

  .stp-ytthumb-wrap-uxL1 p strong {
    font-size: 18px;
  }
}


/* =========================
 YOUTUBE THUMBNAIL FAQ SYSTEM (XL1)
========================= */

.stp-ytthumb-wrap-xL1 {
  margin-top: 40px;
}

.stp-ytthumb-title-xL1 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-ytthumb-faq-xL1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.stp-ytthumb-item-xL1 {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0808;
  transition: all 0.3s ease;
}

/* Question */
.stp-ytthumb-q-xL1 {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Arrow */
.stp-ytthumb-q-xL1 span {
  transition: transform 0.3s ease;
}

/* Answer */
.stp-ytthumb-a-xL1 {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #ccc;
  line-height: 1.6;
}

/* Active State */
.stp-ytthumb-item-xL1.active {
  border: 2px solid #a855f7;
}

/* Open Answer */
.stp-ytthumb-item-xL1.active .stp-ytthumb-a-xL1 {
  max-height: 300px;
  padding: 15px 16px;
}

/* Rotate Arrow */
.stp-ytthumb-item-xL1.active .stp-ytthumb-q-xL1 span {
  transform: rotate(180deg);
}

/* =========================
 IMAGE KB COMPRESSOR CONTENT SYSTEM (UXM1)
========================= */

/* Main Wrapper */
.stp-imgkb-wrap-uxM1 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-imgkb-wrap-uxM1 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-imgkb-wrap-uxM1 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Highlight sections (like Why Choose list) */
.stp-imgkb-wrap-uxM1 p br {
  margin-bottom: 5px;
}

/* Emoji Feature Blocks */
.stp-imgkb-wrap-uxM1 p strong + br {
  display: none;
}

/* Feature lines (emoji + title) */
.stp-imgkb-wrap-uxM1 p:has(strong):not(:first-child) {
  margin-top: 10px;
}

/* Step Titles (1,2,3...) */
.stp-imgkb-wrap-uxM1 p strong:first-child {
  color: #00ff9d;
}

/* Better spacing for steps */
.stp-imgkb-wrap-uxM1 p strong + br + text {
  display: block;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-imgkb-wrap-uxM1 {
    padding: 18px;
  }

  .stp-imgkb-wrap-uxM1 p {
    font-size: 14px;
  }

  .stp-imgkb-wrap-uxM1 p strong {
    font-size: 18px;
  }
}


/* =========================
 IMAGE KB COMPRESSOR WHY SECTION (XM2)
========================= */

.stp-imgkb-why-xM2 {
  margin-top: 50px;
  padding: 30px;
  background: #111;
  border-radius: 16px;
}

/* Title */
.stp-imgkb-why-title-xM2 {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
}

/* Subtitle */
.stp-imgkb-why-sub-xM2 {
  text-align: center;
  color: #555;
  margin-bottom: 30px;
}

/* Grid */
.stp-imgkb-grid-xM2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Card */
.stp-imgkb-card-xM2 {
  display: flex;
  gap: 15px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid #ddd;
  background: #fff;
  transition: all 0.3s ease;
}

/* Hover */
.stp-imgkb-card-xM2:hover {
 transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* Icon */
.stp-imgkb-icon-xM2 {
  font-size: 20px;
  background: #111;
  padding: 10px;
  border-radius: 10px;
  height: fit-content;
}

/* Text */
.stp-imgkb-card-xM2 h3 {
  margin: 0;
  font-size: 16px;
  color: #111;
}

.stp-imgkb-card-xM2 p {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-imgkb-grid-xM2 {
    grid-template-columns: 1fr;
  }
}


/* =========================
 IMAGE KB COMPRESSOR FAQ SYSTEM (XM1)
========================= */

.stp-imgkb-wrap-xM1 {
  margin-top: 40px;
}

.stp-imgkb-title-xM1 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-imgkb-faq-xM1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.stp-imgkb-item-xM1 {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0808;
  transition: all 0.3s ease;
}

/* Question */
.stp-imgkb-q-xM1 {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Arrow */
.stp-imgkb-q-xM1 span {
  transition: transform 0.3s ease;
}

/* Answer */
.stp-imgkb-a-xM1 {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #ccc;
  line-height: 1.6;
}

/* Active State */
.stp-imgkb-item-xM1.active {
  border: 2px solid #a855f7;
}

/* Open Answer */
.stp-imgkb-item-xM1.active .stp-imgkb-a-xM1 {
  max-height: 300px;
  padding: 15px 16px;
}

/* Rotate Arrow */
.stp-imgkb-item-xM1.active .stp-imgkb-q-xM1 span {
  transform: rotate(180deg);
}


/* =========================
 ICON GENERATOR CONTENT SYSTEM (UXP1)
========================= */

/* Main Wrapper */
.stp-icongen-wrap-uxP1 {
  margin-top: 40px;
  background: #0c0808;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
}

/* Headings */
.stp-icongen-wrap-uxP1 p strong {
  display: block;
  font-size: 20px;
  color: #00ff9d;
  margin-bottom: 10px;
  margin-top: 25px;
}

/* Paragraphs */
.stp-icongen-wrap-uxP1 p {
  color: #cccccc;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 15px;
}

/* Highlight sections (like Why Choose list) */
.stp-icongen-wrap-uxP1 p br {
  margin-bottom: 5px;
}

/* Emoji Feature Blocks */
.stp-icongen-wrap-uxP1 p strong + br {
  display: none;
}

/* Feature lines (emoji + title) */
.stp-icongen-wrap-uxP1 p:has(strong):not(:first-child) {
  margin-top: 10px;
}

/* Step Titles (1,2,3...) */
.stp-icongen-wrap-uxP1 p strong:first-child {
  color: #00ff9d;
}

/* Better spacing for steps */
.stp-icongen-wrap-uxP1 p strong + br + text {
  display: block;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-icongen-wrap-uxP1 {
    padding: 18px;
  }

  .stp-icongen-wrap-uxP1 p {
    font-size: 14px;
  }

  .stp-icongen-wrap-uxP1 p strong {
    font-size: 18px;
  }
}

/* =========================
 ICON GENERATOR WHY SECTION (XP2)
========================= */


.stp-icongen-why-xP2 {
  margin-top: 50px;
  padding: 30px;
  background: #111;
  border-radius: 16px;
}

/* Title */
.stp-icongen-why-title-xP2 {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
}

/* Subtitle */
.stp-icongen-why-sub-xP2 {
  text-align: center;
  color: #555;
  margin-bottom: 30px;
}

/* Grid */
.stp-icongen-grid-xP2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Card */
.stp-icongen-card-xP2 {
  display: flex;
  gap: 15px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid #ddd;
  background: #fff;
  transition: all 0.3s ease;
}

/* Hover */
.stp-icongen-card-xP2:hover {
 transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* Icon */
.stp-icongen-icon-xP2 {
  font-size: 20px;
  background: #111;
  padding: 10px;
  border-radius: 10px;
  height: fit-content;
}

/* Text */
.stp-icongen-card-xP2 h3 {
  margin: 0;
  font-size: 16px;
  color: #111;
}

.stp-icongen-card-xP2 p {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

/* Responsive */
@media (max-width: 768px) {
  .stp-icongen-grid-xP2 {
    grid-template-columns: 1fr;
  }
}


/* =========================
 ICON GENERATOR FAQ SYSTEM (XP1)
========================= */

.stp-icongen-wrap-xP1 {
  margin-top: 40px;
}

.stp-icongen-title-xP1 {
  color: #00ff9d;
  margin-bottom: 15px;
}

/* Container */
.stp-icongen-faq-xP1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.stp-icongen-item-xP1 {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0808;
  transition: all 0.3s ease;
}

/* Question */
.stp-icongen-q-xP1 {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Arrow */
.stp-icongen-q-xP1 span {
  transition: transform 0.3s ease;
}

/* Answer */
.stp-icongen-a-xP1 {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #ccc;
  line-height: 1.6;
}

/* Active State */
.stp-icongen-item-xP1.active {
  border: 2px solid #a855f7;
}

/* Open Answer */
.stp-icongen-item-xP1.active .stp-icongen-a-xP1 {
  max-height: 300px;
  padding: 15px 16px;
}

/* Rotate Arrow */
.stp-icongen-item-xP1.active .stp-icongen-q-xP1 span {
  transform: rotate(180deg);
}

.download-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #00ff9d, #00c8ff);
  color: #000;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 255, 157, 0.25);
}

.download-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 255, 157, 0.4);
}

.image-box {
  margin-top: 20px;
  text-align: center;
}

.image-box img {
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}



#canvas {
  display: block;
  margin: 20px auto;
  max-width: 100%;
}




/* AD SECTION (SEPARATE) */


.ad-section {
  grid-column: 1 / -1; /* 🔥 THIS FIXES EVERYTHING */
  width: 100%;
  margin: 40px 0;
  text-align: center;
}

.ad-label {
  font-size: 12px;
  color: #888;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.ad-box {
  display: inline-block;
  background: #111;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,255,150,0.1);
}

.ad-box iframe {
  max-width: 100%;
  border-radius: 8px;
}










.ad-section {
  width: 100%;
  margin: 40px 0;
  text-align: center;
  clear: both;
}

.ad-label {
  font-size: 12px;
  color: #888;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.ad-box {
  display: inline-block;
  background: #111;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,255,150,0.1);
  max-width: 100%;
}

.ad-box iframe {
  max-width: 100%;
  border-radius: 8px;
}