/* ===== PAGE HEADER ===== */
.page-header{
  padding:170px 20px 90px;
  text-align:center;
  background:linear-gradient(135deg,#0f172a,#0f766e);
  color:#fff;
  position:relative;
  overflow:hidden;
}

.page-header::before{
  content:'';
  position:absolute;
  width:500px;
  height:500px;
  background:rgba(255,255,255,0.05);
  border-radius:50%;
  top:-200px;
  right:-120px;
}

.page-header h1{
  font-size:4rem;
  font-weight:800;
  margin-bottom:12px;
  position:relative;
  z-index:2;
}

.page-header p{
  color:#dbeafe;
  font-size:1.1rem;
  position:relative;
  z-index:2;
}

.breadcrumb{
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#fff;
  position:relative;
  z-index:2;
}

.breadcrumb a{
  color:#fff;
  opacity:0.9;
}

/* ===== SERVICES PAGE ===== */
.services-page-grid{
  margin-top:70px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

.service-page-card{
  background:#fff;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 10px 35px rgba(0,0,0,0.06);
  transition:0.4s ease;
  position:relative;
}

.service-page-card:hover{
  transform:translateY(-12px);
}

.service-page-img{
  height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:4rem;
  position:relative;
}

.service-page-img::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.15);
}

.service-page-img i{
  position:relative;
  z-index:2;
}

.service-page-body{
  padding:30px;
}

.service-page-body h3{
  font-size:1.5rem;
  color:#0f172a;
  margin-bottom:14px;
}

.service-page-body p{
  color:#64748b;
  margin-bottom:24px;
}

.btn-read-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--primary);
  font-weight:600;
}

/* ===== MODAL ===== */
.service-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.65);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:0.3s ease;
  z-index:9999;
  padding:20px;
}

.service-modal-overlay.active{
  opacity:1;
  visibility:visible;
}

.service-modal{
  width:min(720px,100%);
  background:#fff;
  border-radius:28px;
  padding:45px;
  position:relative;
  max-height:90vh;
  overflow-y:auto;
  animation:modalPop 0.4s ease;
}

@keyframes modalPop{
  from{
    transform:translateY(40px) scale(0.95);
    opacity:0;
  }
  to{
    transform:translateY(0) scale(1);
    opacity:1;
  }
}

.modal-close{
  position:absolute;
  top:18px;
  right:18px;
  width:45px;
  height:45px;
  border:none;
  border-radius:50%;
  background:#f1f5f9;
  cursor:pointer;
  font-size:1rem;
}

.modal-icon{
  width:90px;
  height:90px;
  border-radius:22px;
  background:rgba(15,118,110,0.1);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.5rem;
  margin-bottom:24px;
}

.modal-title{
  font-size:2.2rem;
  margin-bottom:16px;
  color:#0f172a;
}

.modal-desc{
  color:#64748b;
  margin-bottom:28px;
}

.modal-list{
  display:grid;
  gap:14px;
}

.modal-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  color:#334155;
}

.modal-list li::before{
  content:'✓';
  width:24px;
  height:24px;
  min-width:24px;
  border-radius:50%;
  background:#dcfce7;
  color:#16a34a;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  margin-top:2px;
}

/* ===== ANIMATIONS ===== */
.delay-1{
  transition-delay:0.1s;
}

.delay-2{
  transition-delay:0.2s;
}

.delay-3{
  transition-delay:0.3s;
}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){

  .services-page-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){

  .page-header{
    padding:140px 20px 70px;
  }

  .page-header h1{
    font-size:2.5rem;
  }

  .services-page-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .service-page-img{
    height:190px;
  }

  .service-page-body{
    padding:24px;
  }

  .modal-title{
    font-size:1.7rem;
  }

  .service-modal{
    padding:30px 24px;
  }
}