.category-showcase{position:relative;isolation:isolate;height:100vh;min-height:720px;overflow:hidden;background:#a7d1fa url('./assets/backgrounds/back ground image3.webp') center/cover no-repeat;color:#193765}
.showcase-intro{position:absolute;top:19.4%;left:4%;z-index:2;max-width:690px}
.showcase-intro h2{font-size:clamp(32px,3vw,50px);line-height:1.1;letter-spacing:-.035em;margin:0 0 10px;color:#173969}
.showcase-intro p{font-size:clamp(14px,1.15vw,19px);margin:0;color:#48617f}
.showcase-window{position:absolute;left:max(80px,4.5%);right:max(80px,4.5%);top:34.7%;bottom:9.8%;overflow:hidden;outline-offset:5px;touch-action:pan-y;cursor:grab}
.showcase-window.dragging,.showcase-window.dragging .showcase-card{cursor:grabbing;user-select:none}
.showcase-track{display:flex;gap:14px;height:100%;will-change:transform}
.showcase-card{position:relative;flex:0 0 calc((100% - 42px)/4);height:100%;overflow:hidden;border-radius:19px;background:#e5f1fb;box-shadow:0 12px 35px rgba(50,85,139,.1);color:#163768}
.showcase-card>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 50%;transition:transform .55s ease}
.showcase-card:hover>img,.showcase-card:focus-visible>img{transform:scale(1.035)}
.showcase-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(247,250,255,.72),rgba(247,250,255,0) 38%);pointer-events:none}
.showcase-card-copy{position:absolute;z-index:1;top:6%;left:7.2%;right:6%;display:flex;align-items:flex-start;flex-direction:column}
.showcase-card-copy strong{font-size:clamp(21px,1.65vw,29px);line-height:1.12}
.showcase-card-copy>span:nth-child(2){margin-top:9px;font-size:clamp(12px,.9vw,16px);color:#506684}
.showcase-card-link{display:grid;place-items:center;margin-top:15px;width:42px;height:42px;background:#fff;border-radius:50%;color:#214ed9;box-shadow:0 5px 18px rgba(45,90,153,.08);transition:background-color .3s,color .3s,box-shadow .3s}
.showcase-card-link svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.showcase-card-link:hover{background:#315cfd;color:#fff;box-shadow:0 8px 22px rgba(49,92,253,.3)}
.showcase-card-link morph-icon{transition:transform .3s}
.showcase-card-link:hover morph-icon{transform:scale(1.25)}
.showcase-control{position:absolute;z-index:3;top:60%;transform:translateY(-50%);display:grid;place-items:center;width:64px;height:64px;border:0;border-radius:50%;background:#fff;color:#214ed9;padding:0;box-shadow:0 6px 20px rgba(32,81,164,.14);transition:transform .2s,box-shadow .2s}
.showcase-control span{display:block;font-family:Arial,sans-serif;font-size:32px;font-weight:300;line-height:1}
.showcase-prev span{transform:rotate(180deg)}
.showcase-control:hover{transform:translateY(-50%) scale(1.07);box-shadow:0 8px 26px rgba(32,81,164,.24)}
.showcase-prev{left:max(8px,calc(4.5% - 72px))}.showcase-next{right:max(8px,calc(4.5% - 72px))}
.showcase-dots{position:absolute;z-index:2;left:50%;bottom:5.2%;transform:translateX(-50%);display:flex;gap:8px;align-items:center}
.showcase-dots button{width:27px;height:8px;border:0;border-radius:9px;background:#cad7e8;padding:0;transition:background .25s,width .25s}
.showcase-dots button.active{width:30px;background:#214ed9}
@media(max-width:1050px){.showcase-track{gap:12px}.showcase-card{flex-basis:calc((100% - 12px)/2)}.showcase-intro{top:16.5%}.showcase-window{top:32%;bottom:12%}.showcase-control{top:60%}}
@media(max-width:700px){.category-showcase{height:780px;min-height:780px;background-size:auto 845px;background-position:center -65px}.showcase-intro{top:14%;left:7%;right:7%}.showcase-intro h2{font-size:32px}.showcase-intro p{font-size:13px;line-height:1.45}.showcase-window{left:7%;right:7%;top:31%;bottom:13%}.showcase-track{gap:10px}.showcase-card{flex-basis:calc((100% - 2.5px)/1.25);border-radius:18px}.showcase-card-copy{top:6%;left:7%}.showcase-card-copy strong{font-size:22px}.showcase-card-copy>span:nth-child(2){font-size:12px}.showcase-card-link{width:36px;height:36px;margin-top:11px}.showcase-control{width:43px;height:43px;top:auto;bottom:3%;transform:none}.showcase-control span{font-size:25px}.showcase-control:hover{transform:scale(1.07)}.showcase-prev{left:7%}.showcase-next{right:7%}.showcase-dots{bottom:5.1%}}
@media(prefers-reduced-motion:reduce){.showcase-track,.showcase-card>img,.showcase-control,.showcase-dots button{transition:none!important}}