﻿.services-overview{background:white}
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.services-content h3{font-size:42px;color:#1a1a2e;margin-bottom:30px;line-height:1.2}
.services-content .highlight{color:#28a1e1}
.services-features{list-style:none;margin:30px 0}
.services-features li{padding:12px 0;padding-left:35px;position:relative;font-size:17px;color:#333}
.services-features li::before{content:'✓';position:absolute;left:0;color:#28a1e1;font-weight:700;font-size:20px}
.services-image{position:relative}
.services-image img{width:100%;border-radius:20px;box-shadow:0 30px 60px rgba(0,0,0,0.15)}
.services-image::before{content:'';position:absolute;top:-20px;right:-20px;width:100%;height:100%;border:3px solid #28a1e1;border-radius:20px;z-index:-1}
.service-cards{background:#f8f9fa}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top: 50px;}
.service-card{background:white;border-radius:20px;padding:50px 35px;text-align:center;transition:all 0.4s;position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:5px;background:linear-gradient(135deg,#00d4ff,#0066ff);transform:scaleX(0);transition:transform 0.4s}
.service-card:hover{transform:translateY(-10px);box-shadow:0 30px 60px rgba(0,0,0,0.12)}
.service-card:hover::before{transform:scaleX(1)}
.card-icon{width:90px;height:90px;background:#28a1e1;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 30px;font-size:40px;color:white;transition:transform 0.4s}
.card-icon i{display:flex;align-items:center;justify-content:center;font-size:46px;color:white;transition:transform 0.4s}
.service-card:hover .card-icon{transform:scale(1.1) rotate(5deg)}
.service-card h4{font-size:24px;color:#1a1a2e;margin-bottom:20px}
.service-card p{color:#666;line-height:1.8;}
.card-link{color:#28a1e1;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:gap 0.3s}
.card-link:hover{gap:15px}
.process-section{background:white}
.process-steps{display:flex;justify-content:space-between;position:relative;margin-top: 50px;}
.process-steps::before{content:'';position:absolute;top:60px;left:10%;right:10%;height:3px;background:linear-gradient(135deg,#00d4ff,#0066ff);z-index:0}
.process-step{text-align:center;position:relative;z-index:1;flex:1;max-width:220px}
.step-number{width:120px;height:120px;background:white;border:4px solid #28a1e1;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 30px;font-size:48px;font-weight:700;color:#28a1e1;transition:all 0.4s}
.process-step:hover .step-number{background:#28a1e1;color:white;transform:scale(1.1)}
.process-step h4{font-size:22px;color:#1a1a2e;margin-bottom:15px}
.process-step p{color:#666;font-size:15px}
.capabilities-section{background:url(../img/albg.jpg) center center / cover no-repeat;color:white}
.capabilities-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top: 50px;}
.capability-item{border: 1px solid rgba(0, 212, 255, 0.3);background: rgba(19, 23, 46, 0.3);border-radius:15px;padding:40px 30px;text-align:center;transition:all 0.4s;overflow: hidden;}
.capability-item::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(135deg,#00d4ff,#0066ff);transform:scaleX(0);transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);}
.capability-item:hover::before{transform:scaleX(1);}
.capability-item:hover{transform:translateY(-5px);border-color:#28a1e1}
.capability-icon{margin-bottom:20px;}
.capability-icon i{font-size:48px;margin-bottom:20px;color:#fff}
.capability-item h4{font-size:20px;margin-bottom:15px}
.capability-item p{color:rgba(255,255,255,0.7);font-size:14px}
.materials-section{background:#f5f7f9}
.materials-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top: 50px;}
.material-card{background:white;border-radius:15px;padding:35px 20px;text-align:center;transition:all 0.3s;border:2px solid transparent}
.material-card:hover{border-color:#28a1e1;transform:translateY(-5px);box-shadow:0 15px 40px rgba(0,0,0,0.1)}
.material-icon{width:70px;height:70px;background:#f5f7f9;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:32px;color: #28a1e1;}
.material-card h5{font-size:16px;color:#1a1a2e}
.surface-section{background:white}
.surface-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top: 50px;}
.surface-item{background:#f5f7f9;border-radius:12px;padding:30px;display:flex;align-items:center;gap:15px;transition:all 0.3s}
.surface-item:hover{background:#28a1e1;color:white}
.surface-item:hover h5{color:white}
.surface-dot{width:12px;height:12px;background:#28a1e1;border-radius:50%;flex-shrink:0}
.surface-item:hover .surface-dot{background:white}
.surface-item h5{font-size:16px;color:#1a1a2e;font-weight:500}
.cta-section{background:#f5f7f9 url("../img/ny_wh_bg.jpg") center center / cover no-repeat;background-attachment: fixed;padding:100px 0;text-align:center;color:white}
.cta-section h2{font-size:48px;margin-bottom:20px}
.cta-section p{font-size:20px;margin-bottom:40px;opacity:0.95}
.btn-white{background:white;color:#28a1e1;padding:18px 45px;border:none;border-radius:35px;font-weight:700;font-size:16px;cursor:pointer;transition:all 0.3s;text-decoration:none;display:inline-block}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(0,0,0,0.2)}
@media (max-width:1200px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .capabilities-grid{grid-template-columns:repeat(2,1fr)}
  .materials-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:992px){
  .services-grid{grid-template-columns:1fr;gap:20px}
  .process-steps::before{display:none}
}
@media (max-width:768px){
  .cards-grid,.capabilities-grid,.materials-grid,{grid-template-columns:1fr}
}
@media screen and (max-width:1199px){
  .services-content h3{font-size: 20px;margin-bottom: 10px;}
  .services-content p{font-size: 14px!important;margin-bottom: 14px!important;line-height: 1.6;}
  .services-features{margin: 14px 0;}
  .services-features li{padding: 5px 0;padding-left: 16px;font-size: 14px;color: #333;}
  .services-features li::before{font-size: 14px;}
  .services-image::before{top:-10px;right:-10px;border:2px solid #28a1e1;}
  .cards-grid{gap: 14px;margin-top: 20px;}
  .service-card{padding: 20px 10px;}
  .service-card::before{height: 2px;}
  .card-icon{width: 46px;height:46px;margin:0 auto 10px;font-size:24px;}
  .card-icon i{font-size:24px;}
  .service-card h4{font-size:16px;margin-bottom:5px}
  .service-card p{line-height:1.5;}
  .process-steps{margin-top: 20px;flex-wrap:wrap;gap:0px;}
  .process-step{max-width: none;width:23.5%;flex:auto;margin:0 2% 2% 0;padding: 10px 0;}
  .process-step:nth-child(4n){margin-right:0;}
  .step-number{width:46px;height:46px;border:2px solid #28a1e1;margin:0 auto 10px;font-size:22px;}
  .process-step h4{font-size:16px;margin-bottom:5px}
  .process-step p{font-size:14px}
  .capabilities-grid{gap: 14px;margin-top: 20px;}
  .capability-item{padding: 24px 10px;}
  .capability-icon{margin-bottom: 10px;}
  .capability-icon i{font-size:36px;margin-bottom:0px;}
  .capability-item h4{font-size:16px;margin-bottom:5px}
  .materials-grid{gap:10px;margin-top: 20px;}
  .material-card{padding:20px 10px;}
  .material-card:hover{border-color:#28a1e1;transform:translateY(-5px);box-shadow:0 15px 40px rgba(0,0,0,0.1)}
  .material-icon{width:50px;height:50px;margin:0 auto 10px;font-size:24px;}
  .material-card h5{font-size:14px;}
  .surface-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-top: 20px;}
  .surface-item{padding:15px;gap:8px;}
  .surface-dot{width:6px;height:6px;}
  .surface-item h5{font-size:14px;}
  .cta-section h2{font-size:20px;margin-bottom:10px}
  .cta-section p{font-size:14px;margin-bottom:20px}
  .btn-white{padding: 7px 24px;border-radius:35px;font-size:14px;}
  .cta-section{padding: 60px 0;}

}
@media screen and (max-width:750px){
  .process-step{width:49%;}
  .process-step:nth-child(2n){margin-right:0;}
  .surface-grid{grid-template-columns:repeat(2,1fr);}
}
@media screen and (max-width:499px){
  .surface-grid{grid-template-columns:repeat(1,1fr);}
}