/* Hero Section */
.serviceshero-section {
  min-height: 60vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom right, #0f172a, #1e293b, #0f172a);
  display: flex;
  align-items: center;
}
.serviceshero-bg { 
   position: absolute; 
   inset: 0; 
   z-index: 0; 
}

/* Content */
.serviceshero-container {
  position: relative; 
  z-index: 10;
  max-width: 1280px; 
  margin: 0 auto;
  padding: 96px 24px; 
  text-align: center;
}
@media(min-width:768px){
    .serviceshero-container{padding:96px 48px}
}
@media(min-width:1200px){
    .serviceshero-container{padding:96px 96px}
}

.serviceshero-badge {
  display:inline-block; 
  padding:8px 16px;
  background: rgba(59,130,246,0.2);
  border:1px solid rgba(59,130,246,0.3);
  border-radius:9999px; 
  color:#93c5fd;
  margin-bottom:24px;
}
.serviceshero-title {
  color:#fff; 
  margin-bottom:24px;
  max-width:896px; 
  margin-left:auto; 
  margin-right:auto;
}
.serviceshero-description {
  color:#cbd5e1; 
  margin-bottom:32px;
  max-width:672px; 
  margin-left:auto; 
  margin-right:auto;
}

.serviceshero-btn a{
    color: #ffff;
    text-decoration: none;
}
.serviceshero-btn {
  background: linear-gradient(to right,#3b82f6,#f97316);
  color:#fff; 
  border:none; 
  border-radius:8px;
  padding:12px 24px; 
  font-size:1rem; 
  font-weight:500;
  display:inline-flex; 
  align-items:center; 
  cursor:pointer;
  transition:background .3s;
}
.serviceshero-btn:hover {
  background: linear-gradient(to right,#2563eb,#ea580c);
}
.serviceshero-btn i { 
    transition:transform .3s; 
}
.serviceshero-btn:hover i { 
    transform:translateX(4px); 
}

/* Benefits Section */
.serviceshero-benefits {
  background:#f8fafc; 
  padding:64px 24px;
}
@media(min-width:768px){
    .serviceshero-benefits{padding:64px 48px}
}
@media(min-width:1200px){
    .serviceshero-benefits{padding:64px 96px}
}
.serviceshero-benefits-grid { 
    max-width:1280px; 
    margin:0 auto; }

.serviceshero-card {
  background:#fff; 
  border-radius:12px; 
  padding:24px;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
  text-align:left;
  transition:transform .3s, box-shadow .3s;
}
.serviceshero-card:hover {
  transform:translateY(-4px);
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
}
.serviceshero-icon {
  width:48px; 
  height:48px; 
  border-radius:8px;
  background:linear-gradient(to bottom right,#3b82f6,#f97316);
  display:flex; 
  align-items:center; 
  justify-content:center;
  margin-bottom:16px;
}
.serviceshero-icon i { 
    color:#fff; 
    font-size:24px; 
}
.serviceshero-card h3 { 
    color:#0f172a; 
    margin-bottom:8px; 
    font-size: 15px;
}
.serviceshero-card p { 
    color:#475569; 
    font-size: 14px;
}







/* Section */
.servicesdetail-section { 
    background:#fff; 
    padding:96px 24px; 
}
@media(min-width:768px){
    .servicesdetail-section{padding:96px 48px}
}
@media(min-width:1200px){
    .servicesdetail-section{padding:96px 96px}
}
@media (min-width:991px) {
    
}
.servicesdetail-container { 
    max-width:1280px; 
    margin:0 auto; 
}

.servicesdetail-btn a{
    color: #ffff;
    text-decoration: none;
}

/* Image */
.servicesdetail-image { 
    position:relative; 
    border-radius:16px; 
    overflow:hidden; 
    box-shadow:0 25px 50px -12px rgba(0,0,0,.25); 
}
.servicesdetail-img { 
    width:100%; 
    height:400px; 
    object-fit:cover; 
    transition:transform .5s; 
}
.servicesdetail-image:hover .servicesdetail-img { 
    transform:scale(1.05); 
}
.servicesdetail-overlay { 
    position:absolute; 
    inset:0; background:linear-gradient(to top,rgba(15,23,42,.6),transparent); 
}
.servicesdetail-iconbadge {
  position:absolute; 
  top:24px; 
  left:24px;
  width:64px; 
  height:64px; 
  border-radius:16px;
  display:flex; 
  align-items:center; 
  justify-content:center;
  color:#fff; 
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1);
}
.servicesdetail-iconbadge i { 
    font-size:32px; 
}

/* Content */
.servicesdetail-badge { 
    display:inline-block; 
    padding:8px 16px; 
    border-radius:9999px; 
    margin-bottom:16px; 
}
.servicesdetail-title { 
    color:#0f172a; 
    margin-bottom:16px; 
}
.servicesdetail-desc { 
    color:#475569; 
    margin-bottom:24px; 
}
.servicesdetail-offerings { 
    list-style:none; 
    padding:0; 
    margin-bottom:32px; 
}
.servicesdetail-offerings li { 
    display:flex; 
    gap:12px; 
    align-items:flex-start; 
    margin-bottom:12px; 
}
.servicesdetail-offerings span { 
    color:#334155; 
}

/* Buttons */
.servicesdetail-btn {
  border:none; 
  border-radius:8px; 
  padding:12px 24px;
  color:#fff; 
  font-weight:500; 
  cursor:pointer;
  display:inline-flex; 
  align-items:center;
  transition:opacity .3s;
}
.servicesdetail-btn:hover { 
    opacity:.9; 
}
.servicesdetail-btn i { 
    transition:transform .3s; 
}
.servicesdetail-btn:hover i { 
    transform:translateX(4px); 
}

/* Color Themes */
.servicesdetail-badge-blue { 
    background:#eff6ff; 
    color:#2563eb; 
}
.servicesdetail-badge-orange { 
    background:#fff7ed; 
    color:#ea580c; 
}
.servicesdetail-badge-green { 
    background:#ecfdf5; 
    color:#16a34a; 
}
.servicesdetail-badge-purple { 
    background:#f5f3ff; 
    color:#9333ea; 
}

.servicesdetail-blue { 
    background:linear-gradient(to bottom right,#3b82f6,#2563eb); 
}
.servicesdetail-orange { 
    background:linear-gradient(to bottom right,#f97316,#ea580c); 
}
.servicesdetail-green { 
    background:linear-gradient(to bottom right,#22c55e,#16a34a); 
}
.servicesdetail-purple { 
    background:linear-gradient(to bottom right,#a855f7,#9333ea); 
}

.servicesdetail-btn-blue { 
    background:linear-gradient(to right,#3b82f6,#2563eb); 
}
.servicesdetail-btn-orange { 
    background:linear-gradient(to right,#f97316,#ea580c); 
}
.servicesdetail-btn-green { 
    background:linear-gradient(to right,#22c55e,#16a34a); 
}
.servicesdetail-btn-purple { 
    background:linear-gradient(to right,#a855f7,#9333ea); 
}











/* CTA Section */
.cta-section {
  background: linear-gradient(to bottom right, #0f172a, #1e293b);
  padding: 96px 24px;
}
@media(min-width:768px){
    .cta-section{padding:96px 48px}
}
@media(min-width:1200px){
    .cta-section{padding:96px 96px}
}

.cta-container { 
    max-width:896px; 
    margin:0 auto; 
    text-align:center; 
}
.cta-title { 
    color:#fff; 
    margin-bottom:24px; 
}
.cta-description { 
    color:#cbd5e1; 
    max-width:672px; 
    margin:0 auto 32px; 
}

/* Buttons */
.cta-buttons { 
    gap:16px; 
}
.cta-btn-primary a{
    color: #ffff;
    text-decoration: none;
}
.cta-btn-primary {
  background: linear-gradient(to right,#3b82f6,#f97316);
  color:#fff; 
  border:none; 
  border-radius:8px;
  padding:12px 24px; 
  font-size:1rem; 
  font-weight:500;
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  transition:background .3s;
}
.cta-btn-primary:hover {
  background: linear-gradient(to right,#2563eb,#ea580c);
}
.cta-btn-primary i { 
    transition:transform .3s; 
}
.cta-btn-primary:hover i { 
    transform:translateX(4px); 
}

.cta-btn-secondary {
  background:transparent; 
  border:1px solid #475569;
  color:#fff; 
  border-radius:8px;
  padding:12px 24px; 
  font-size:1rem; 
  font-weight:500;
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  transition:background .3s;
}
.cta-btn-secondary:hover { 
    background:rgba(255,255,255,.1); 
}