body{
    font-family:'Segoe UI',sans-serif;
    background:#f8fafc;
    color:#333;
}

/* PAGE HEADER */

.page-header{
    padding:90px 0 50px;
    background:
    linear-gradient(rgba(15,96,107,.95),rgba(15,96,107,.95));
    color:white;
}

.page-header h1{
    font-weight:800;
    font-size:3rem;
}

.page-header p{
    max-width:700px;
    opacity:.9;
}

/* SECTION */

.section-padding{
    padding:90px 0 70px;
}

.section-title{
    font-weight:700;
    color:var(--secondary);
    margin-bottom:40px;
    position:relative;
}

.section-title::after{
    content:'';
    width:80px;
    height:4px;
    background:var(--primary);
    position:absolute;
    left:0;
    bottom:-12px;
    border-radius:10px;
}

/* BUTTON */

.btn-primary-custom{
    background:var(--primary);
    border:none;
    color:white;
    font-weight:600;
    border-radius:14px;
}

.btn-primary-custom:hover{
    background:#ea6f1f;
    color:white;
}

.btn-light{
    background:white;
    border:none;
    color:var(--primary);
    font-weight:600;
}

/* BADGE */

.badge-custom{
    background:rgba(253,128,46,.15);
    color:var(--primary);
    padding:8px 14px;
    border-radius:50px;
    font-size:.8rem;
    font-weight:600;
    display:inline-block;
}

.badge-status{
    background:rgba(40,167,69,.15);
    color:#28a745;
    padding:8px 14px;
    border-radius:50px;
    font-size:.8rem;
    font-weight:600;
}

/* CARD GLOBAL */

.service-card,
.news-card,
.umkm-card,
.agenda-card,
.gallery-card,
.stat-card{
    border:none;
    border-radius:20px;
    transition:.3s;
    overflow:hidden;
    background:white;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
}

.service-card:hover,
.news-card:hover,
.umkm-card:hover,
.agenda-card:hover,
.gallery-card:hover,
.stat-card:hover{
    transform:translateY(-5px);
}

/* ICON */

.info-icon,
.icon-box{
    width:65px;
    height:65px;
    border-radius:16px;
    background:rgba(253,128,46,.15);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:20px;
}

.info-icon{
    width:70px;
    height:70px;
    border-radius:20px;
    font-size:30px;
}

/* IMAGES */

.news-card img,
.umkm-card img,
.gallery-card img{
    height:220px;
    object-fit:cover;
}

/* SUMMARY CARD */

.summary-card{
    border:none;
    border-radius:24px;
    background:white;
    padding:30px;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
    height:100%;
    transition:.3s;
  }
  
  .summary-card:hover{
    transform:translateY(-5px);
  }
  
  .summary-icon{
    width:70px;
    height:70px;
    border-radius:20px;
    background:rgba(253,128,46,.15);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    margin-bottom:20px;
  }

  .summary-value{
    font-size:2rem;
    font-weight:800;
    color:var(--secondary);
  }
  
  .summary-label{
    color:#6c757d;
    margin-top:8px;
  }
  
  /* BUDGET / CONTENT CARD */
  
  .budget-card{
    border:none;
    border-radius:24px;
    background:white;
    padding:30px;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
  }
  
  /* CHART */
  
  .chart-title{
    font-weight:700;
    color:var(--secondary);
    margin-bottom:25px;
  }
  
  /* PROGRESS */
  
  .progress{
    border-radius:50px;
    background:#edf2f7;
  }
  
  .progress-bar{
    border-radius:50px;
  }
  
  /* TABLE EFFECT */

  .table thead{
    background:var(--secondary);
    color:white;
  }
  
  .table tfoot{
    background:#f8fafc;
  }
  
  .table tbody tr{
    transition:.2s;
  }
  
  .table tbody tr:hover{
    background:#fff8f3;
  }
  
  .table td{
    vertical-align:middle;
  }

  /* GALLERY */

  .gallery-img{
    width:100%;
    height:230px;
    object-fit:cover;
    border-radius:24px;
  }
/* RESPONSIVE */

@media(max-width:768px){

    .hero h1{
        font-size:2.3rem;
    }

}

@media(max-width:768px){
    .section-padding{
        padding:70px 0 50px;
    }

    .page-header{
        text-align:center;
        padding:70px 0 35px;
    }

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

    .event-banner{
        height:280px;
    }

    .event-content{
        padding:25px;
    }

    .summary-value{
        font-size:1.6rem;
      }
    
    .card-body-custom{
        padding:25px;
    }

}