.page-header{position:relative;padding:180px 0 100px;background:linear-gradient(135deg,#0f0f23,#1a1a2e,#16213e);overflow:hidden;text-align:center}
.page-header::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E")}
.page-header .container{position:relative;z-index:2}
.page-header h1{font-size:52px;color:#fff;margin-bottom:15px;font-weight:900}
.breadcrumb{display:flex;justify-content:center;gap:10px;align-items:center;color:rgba(255,255,255,.6);font-size:15px}
.breadcrumb a{color:#EF5350}
.breadcrumb .sep{color:rgba(255,255,255,.3)}
.breadcrumb .current{color:#fff}
.ph-shape{position:absolute;border:2px solid rgba(211,47,47,.15);border-radius:50%;animation:floatY 6s ease-in-out infinite}
.ph-s1{width:100px;height:100px;top:15%;left:5%}
.ph-s2{width:60px;height:60px;top:60%;right:8%;animation-delay:1s}
.ph-s3{width:80px;height:80px;bottom:15%;left:15%;animation-delay:2s}

.live-tracking-visual{position:relative;height:500px;background:linear-gradient(135deg,#1a1a2e,#0f0f23);border-radius:20px;overflow:hidden;margin-top:50px}
.route-main-path{fill:none;stroke:rgba(255,255,255,.1);stroke-width:3;stroke-linecap:round}
.route-active-path{fill:none;stroke:#D32F2F;stroke-width:3;stroke-linecap:round;stroke-dasharray:2000;stroke-dashoffset:2000;animation:drawRoute 4s ease-in-out forwards}
@keyframes drawRoute{to{stroke-dashoffset:0}}
.route-dashed{fill:none;stroke:#D32F2F;stroke-width:2;stroke-dasharray:8,6;opacity:.4;animation:dashFlow 1.5s linear infinite}
@keyframes dashFlow{to{stroke-dashoffset:-28}}
.loc-dot{fill:#fff;stroke:#D32F2F;stroke-width:3;cursor:pointer}
.loc-dot.active{fill:#D32F2F;animation:locPulse 2s ease-in-out infinite}
@keyframes locPulse{0%,100%{r:8}50%{r:11}}
.loc-ring{fill:none;stroke:#D32F2F;stroke-width:1;opacity:0;animation:ringExp 2s ease-out infinite}
@keyframes ringExp{0%{r:8;opacity:.6}100%{r:25;opacity:0}}
.loc-label{fill:rgba(255,255,255,.8);font-family:'Inter',sans-serif;font-size:11px;font-weight:700;text-anchor:middle}
.loc-sub{fill:rgba(255,255,255,.4);font-size:9px;text-anchor:middle}
.tracking-info-overlay{position:absolute;bottom:20px;left:20px;right:20px;display:flex;gap:15px;z-index:5}
.tracking-info-card{flex:1;background:rgba(255,255,255,.08);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:15px 20px;color:#fff}
.tracking-info-card .info-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.5);margin-bottom:4px}
.tracking-info-card .info-value{font-family:'Inter',sans-serif;font-size:16px;font-weight:700}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.pricing-card{background:#fff;border-radius:20px;padding:40px 30px;text-align:center;position:relative;transition:all .4s;box-shadow:0 2px 10px rgba(0,0,0,.08);overflow:hidden}
.pricing-card:hover{transform:translateY(-10px);box-shadow:0 20px 60px rgba(0,0,0,.15)}
.pricing-card.featured{border:2px solid #D32F2F}
.pricing-card.featured::before{content:'POPULAR';position:absolute;top:20px;right:-30px;background:#D32F2F;color:#fff;padding:5px 40px;font-size:11px;font-weight:700;letter-spacing:1px;transform:rotate(45deg)}
.pricing-icon{width:70px;height:70px;background:#FFCDD2;border-radius:20px;display:flex;align-items:center;justify-content:center;color:#D32F2F;font-size:28px;margin:0 auto 20px}
.pricing-card h3{font-size:22px;margin-bottom:10px}
.pricing-price{font-size:48px;font-weight:900;color:#1a1a2e;margin:20px 0}
.pricing-price span{font-size:16px;color:#565969;font-weight:400}
.pricing-features{text-align:left;margin:25px 0}
.pricing-features li{padding:8px 0;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:10px;font-size:14px;color:#565969}
.pricing-features li i{color:#D32F2F;font-size:12px}

.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.project-card{position:relative;border-radius:20px;overflow:hidden;cursor:pointer;transition:all .4s}
.project-card:hover{transform:translateY(-5px);box-shadow:0 20px 60px rgba(0,0,0,.15)}
.project-card .project-img{height:280px;background:linear-gradient(135deg,#1a1a2e,#0f3460);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.3);font-size:50px}
.project-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(211,47,47,.9) 0%,transparent 60%);opacity:0;transition:all .4s;display:flex;align-items:flex-end;padding:25px}
.project-card:hover .project-overlay{opacity:1}
.project-overlay h3{color:#fff;font-size:20px;margin-bottom:4px}
.project-overlay p{color:rgba(255,255,255,.8);font-size:14px}
.project-overlay .project-link{position:absolute;top:20px;right:20px;width:40px;height:40px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}

.team-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.team-detail-img{border-radius:20px;overflow:hidden}
.team-detail-img .img-placeholder{height:500px}
.team-detail-info h2{font-size:36px;margin-bottom:10px}
.team-detail-info .team-role{font-size:14px;color:#D32F2F;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-bottom:20px}
.team-detail-info p{margin-bottom:15px;color:#565969}
.team-skills{margin:25px 0}
.team-contact{display:flex;gap:20px;margin-top:25px}
.team-contact-item{display:flex;align-items:center;gap:10px;font-size:14px;color:#565969}
.team-contact-item i{color:#D32F2F}

.blog-detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:40px}
.blog-detail-content{background:#fff;border-radius:20px;padding:40px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.blog-detail-content h2{font-size:28px;margin-bottom:15px}
.blog-detail-content p{margin-bottom:15px;color:#565969;line-height:1.8}
.blog-sidebar .sidebar-widget{background:#fff;border-radius:20px;padding:25px;margin-bottom:25px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.blog-sidebar h3{font-size:18px;margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid #FFCDD2}
.blog-sidebar .search-box{display:flex;gap:10px}
.blog-sidebar .search-box input{flex:1;padding:10px 15px;border:1px solid #e0e0e0;border-radius:8px;font-size:14px}
.blog-sidebar .search-box button{background:#D32F2F;color:#fff;border:none;padding:10px 18px;border-radius:8px;cursor:pointer}
.blog-sidebar .cat-list li{padding:8px 0;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;font-size:14px;color:#565969}
.blog-sidebar .cat-list li span{color:#D32F2F;font-weight:600}
.blog-sidebar .recent-post{display:flex;gap:12px;margin-bottom:15px}
.blog-sidebar .recent-post .rp-img{width:70px;height:70px;background:linear-gradient(135deg,#1a1a2e,#0f3460);border-radius:10px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.3);font-size:20px;flex-shrink:0}
.blog-sidebar .recent-post h4{font-size:14px;margin-bottom:3px}
.blog-sidebar .recent-post p{font-size:12px;color:#8a8d9b}
.blog-sidebar .tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.blog-sidebar .tag-cloud a{background:#F4F5F9;padding:6px 14px;border-radius:20px;font-size:13px;color:#565969;transition:all .3s}
.blog-sidebar .tag-cloud a:hover{background:#D32F2F;color:#fff}

@media(max-width:992px){
.pricing-grid,.project-grid{grid-template-columns:1fr}
.team-detail-grid,.blog-detail-grid{grid-template-columns:1fr}
.tracking-info-overlay{flex-direction:column}
.page-header h1{font-size:36px}
}