.portfolio-modern { padding:80px 0 66px; background:radial-gradient(ellipse at 100% 0,#edf5ff,transparent 45%),#fff; }
.portfolio-modern-heading { margin-bottom:32px; }
.portfolio-heading-actions { display:flex; align-items:center; gap:25px; }
.portfolio-heading-actions > span { color:#8190a3; font-size:14px; }
.portfolio-controls { display:flex; gap:10px; }
.portfolio-modern .portfolio-prev,.portfolio-modern .portfolio-next { min-width:0; width:44px; height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:1px solid #dce7f3; border-radius:50%; background:#fff; color:#315477; font-size:18px; box-shadow:none; }
.portfolio-modern .portfolio-prev:hover,.portfolio-modern .portfolio-next:hover { background:#0799f4; color:#fff; border-color:#0799f4; }
.portfolio-modern .portfolioSwiper { padding:5px 0 22px; }
.portfolio-modern .portfolioSwiper .swiper-wrapper { transition-timing-function:ease !important; }
.portfolio-modern .project-style3 { border-radius:16px; border-color:#e0e9f4; box-shadow:0 5px 20px #16385205; }
.portfolio-modern .project-style3::before { content:"●  ●  ●"; display:block; height:29px; flex:0 0 29px; line-height:27px; padding-left:14px; font-size:8px; letter-spacing:3px; color:#bdcbdc; background:linear-gradient(90deg,#f1f6fc,#f9fbff); border-bottom:1px solid #e7eef6; }
.portfolio-modern .project-style3:hover { border-color:#8bcdf7; box-shadow:0 12px 30px #16385212; }
.portfolio-modern .project-img { height:320px; flex:0 0 320px; background:#eaf1f9; }
.portfolio-modern .project-img::before { height:65px; background:linear-gradient(transparent,#0a284326); }
.portfolio-modern .project-img::after { content:"Scroll preview"; border-radius:7px; padding:9px 13px; background:#071b43d9; letter-spacing:.07em; font-size:9px; }
.portfolio-modern .project-bottom { position:relative; padding:22px 20px; min-height:119px; align-items:flex-start; background:linear-gradient(125deg,#fff,#f9fcff); }
.portfolio-modern .project-bottom .media-body { width:100%; }
.portfolio-modern .project-title { font-size:17px; line-height:1.4; padding-right:31px; letter-spacing:-.025em; margin-bottom:11px; }
.portfolio-modern .project-title a::after { content:"↗"; position:absolute; right:16px; top:21px; width:28px; height:28px; border:1px solid #e0edf8; border-radius:50%; display:grid; place-items:center; background:#eef8ff; color:#0799f4; font-size:18px; line-height:1; transition:background .2s,color .2s; }
.portfolio-modern .project-title a:hover::after { background:#0799f4; color:#fff; }
.portfolio-modern .project-category { display:inline-block; font-size:10px; font-weight:600; color:#287aaf; background:#edf7ff; border:1px solid #deeffb; border-radius:6px; padding:4px 9px; }
.portfolio-modern .swiper-slide:nth-child(3n+2) .project-category { color:#8252bc; background:#f6f0ff; border-color:#ece0fc; }
.portfolio-modern .swiper-slide:nth-child(3n) .project-category { color:#248f80; background:#ebfaf5; border-color:#d6f0e7; }
.portfolio-modern .mobile-arrows { display:none !important; }
@media (min-width:1600px) { .portfolio-modern .project-img { height:370px; flex-basis:370px; } }
@media (max-width:1199.98px) { .portfolio-heading-actions > span { display:none; } .portfolio-modern .project-title { font-size:15px; } .portfolio-modern .project-bottom { padding:20px 15px; } }
@media (max-width:991.98px) { .portfolio-modern { padding:60px 0 45px; } .portfolio-modern .project-img { height:340px; flex-basis:340px; } }
@media (max-width:575.98px) { .portfolio-modern { padding:48px 0 32px; } .portfolio-modern-heading { flex-direction:row; align-items:flex-end; gap:15px; } .portfolio-modern-heading .services-heading-main { min-width:0; } .portfolio-modern-heading h2 { font-size:29px; } .portfolio-modern-heading .services-eyebrow { font-size:9px; letter-spacing:.09em; } .portfolio-controls { gap:6px; } .portfolio-modern .portfolio-prev,.portfolio-modern .portfolio-next { width:34px; height:34px; font-size:15px; } .portfolio-modern .project-img { height:340px; flex-basis:340px; } .portfolio-modern .project-title { font-size:18px; } }
@media (prefers-reduced-motion:reduce) { .portfolio-modern .project-style3,.portfolio-modern .project-title a::after { transition:none; } }