.question {
    font-size: 25px;
    cursor: pointer;
     line-height: 1.6;
}

.answer {
    max-height: 0;
    overflow: hidden;
    width: 60%; 
    font-size: large;
    text-align: left;
    color: azure;
    margin: auto;
    transition: max-height 0.3s ease-out;
}

.answer.show {
    max-height: 500px; /* Adjust the max height as needed */
    transition: max-height 1.3s ease-in;
}

.imgcenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
/* add */
.compare-row {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}

/* Each “diff-block” takes roughly 45% of the viewport. Adjust as desired. */
.diff-block {
--w: 70%;              
flex: 0 1 45%;
display: flex;
flex-direction: column;
align-items: center;
margin: 3rem 0;
}


.img-container {
width: var(--w);          /* 70% of the .diff-block column */
display: flex;
flex-direction: column;
align-items: center;
}

.img-diff {
width: 70%;               /* 100% of its parent .img-container (i.e. 70% of the column) */
aspect-ratio: 768 / 1286;  /* preserves the tall shape                             */
position: relative;
cursor: ew-resize;
--pos: 50%;                
max-height: 400px;        
border:2px solid #ffffff1a;   
border-radius:0;       
box-sizing:border-box;
}

.img-diff .img-wrapper {
position: absolute;
inset: 0;
display: flex;
}

.img-diff img {
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}

/* Left (raw) half: show from 0 → var(--pos) */
.img-left {
clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* Right (adjusted) half: show from var(--pos) → 100% */
.img-right {
clip-path: inset(0 0 0 var(--pos));
}

/* White divider line at var(--pos) */
.img-divider {
position: absolute;
inset: 0 auto 0 var(--pos);
width: 2px;
background: #fff;
pointer-events: none;
}

.img-range{
position:absolute;inset:0;           /* cover the whole picture       */
width:100%;height:100%;
margin:0.75rem 0 0;padding:0;opacity:0;        /* invisible but captures drag   */
cursor:ew-resize;
}

.img-knob{
position:absolute;
top:50%;left:var(--pos);
transform:translate(-50%,-50%);
width:56px;height:56px;
border-radius:50%;
background:#000c;                
border:4px solid #fff;
box-shadow:0 3px 8px rgb(0 0 0 / .3);
display:flex;align-items:center;justify-content:center;
pointer-events:none;                 
}
.img-knob::before{                  
content:"\2194";                 
font-size:28px;line-height:1;
color:#fff;
}

.head-comparison {
display: flex;
justify-content: center;
gap: 2rem;       
margin: 3rem 0;          
}

.head-block {
display: flex;
flex-direction: column;
align-items: center;
}

.head-block img {
max-width: 100%;
max-height: 400px;      
object-fit: contain;
display: block;
}

.head-block figcaption {
margin-top: 1rem;
font-size: 1.25rem;
font-weight: 500;
color: #fff;             
text-align: center;
}
.image-wrapper {
aspect-ratio: 1 / 1; /* Maintains square aspect */
background-color: #4b5563; /* Equivalent to Tailwind's bg-gray-600 */
border-radius: 0.5rem; /* rounded-lg */
overflow: hidden;
width: 100%;           /* or set a fixed width like 300px */
max-width: 400px;      /* optional */
margin: auto;        
}