:root{

    --primary:#2196F3;
    --primary-hover:#1E88E5;
    --primary-active:#1976D2;

    --success:#4CAF50;
    --success-hover:#43A047;
    --success-active:#388E3C;

    --danger:#F44336;
    --danger-hover:#E53935;
    --danger-active:#D32F2F;

    --warning:#FF9800;
    --warning-hover:#FB8C00;
    --warning-active:#F57C00;

    --info:#00BCD4;
    --info-hover:#00ACC1;
    --info-active:#0097A7;

    --dark:#212529;
    --dark-hover:#1c1f23;
    --dark-active:#16181b;

    --light:#f8f9fa;
    --light-hover:#e9ecef;
    --light-active:#dee2e6;
}

.form-select {
    height:56px;
}

/* Form Control */
.form-control {
    height:56px;
    padding:0.75rem 1rem;
    font-size:1rem;
    font-weight:500;
    color:#495057;

    background:#fff;
    border:1px solid #cfd8e3;
    border-radius:12px;

    transition:all .25s ease;
    box-shadow:none;
}

.form-control::placeholder{
    color:#adb5bd;
    font-weight:400;
}

.form-control:hover{
    border-color:#7ab8ff;
}

.form-control:focus{
    border-color:#2f8df5;
    box-shadow:0 0 0 .2rem rgba(47,141,245,.15);
}

input[type="date"].form-control{
    padding-right:1rem;
}

input[type="date"]::-webkit-calendar-picker-indicator{
    cursor:pointer;
    opacity:.75;
}

/* .btn-primary{
    height:56px;
    padding:0 28px;
    border-radius:12px;
    font-weight:600;
    font-size:1rem;
} */

.form-group{
    margin-bottom:1.5rem;
}

label{
    font-weight:600;
    margin-bottom:.5rem;
    color:#2d3748;
}

.cta-banner{
    backdrop-filter:blur(12px) !important;

    border:1px solid rgba(90,160,255,.2) !important;
    border-radius:24px !important;

    box-shadow:0 10px 30px rgba(0,0,0,.08) !important;
}

.table-transparent,
.table-transparent th,
.table-transparent td {
    --bs-table-bg: transparent !important;
    background-color: transparent !important;
}

.why-us .cta-banner .cta-actions .btn-cta-success {
  display: inline-block;
  padding: 16px 32px;
  background: var(--success);
  color: var(--contrast-color);
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.why-us .cta-banner .cta-actions .btn-cta-success:hover {
  background: color-mix(in srgb, var(--success), #000 15%);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px color-mix(in srgb, var(--success-hover), transparent 50%);
}

.why-us .cta-banner .cta-actions .btn-cta-info {
  display: inline-block;
  padding: 16px 32px;
  background: var(--info);
  color: var(--contrast-color);
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.why-us .cta-banner .cta-actions .btn-cta-info:hover {
  background: color-mix(in srgb, var(--info), #000 15%);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px color-mix(in srgb, var(--info-hover), transparent 50%);
}

.why-us .cta-banner .cta-actions .btn-cta-warning {
  display: inline-block;
  padding: 16px 32px;
  background: var(--warning);
  color: var(--contrast-color);
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.why-us .cta-banner .cta-actions .btn-cta-warning:hover {
  background: color-mix(in srgb, var(--warning), #000 15%);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px color-mix(in srgb, var(--warning-hover), transparent 50%);
}

.why-us .cta-banner .cta-actions .btn-cta-danger {
  display: inline-block;
  padding: 16px 32px;
  background: var(--danger);
  color: var(--contrast-color);
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.why-us .cta-banner .cta-actions .btn-cta-danger:hover {
  background: color-mix(in srgb, var(--danger), #000 15%);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px color-mix(in srgb, var(--danger-hover), transparent 50%);
}

.why-us .cta-banner .cta-actions .btn-cta-dark {
  display: inline-block;
  padding: 16px 32px;
  background: var(--dark);
  color: var(--contrast-color);
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.why-us .cta-banner .cta-actions .btn-cta-dark:hover {
  background: color-mix(in srgb, var(--dark), #000 15%);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px color-mix(in srgb, var(--dark-hover), transparent 50%);
}

.why-us .cta-banner .cta-actions .btn-cta-light {
  display: inline-block;
  padding: 16px 32px;
  background: var(--light);
  color: var(--contrast-color);
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.why-us .cta-banner .cta-actions .btn-cta-light:hover {
  background: color-mix(in srgb, var(--light), #000 15%);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px color-mix(in srgb, var(--light-hover), transparent 50%);
}

/* File Input */
input[type="file"].form-control{
    height:50px;
    border:1px solid #cfd8e3;
    border-radius:12px;
    background:#fff;
    transition:all .25s ease;
}

input[type="file"].form-control:hover{
    border-color:#2196F3;
}

input[type="file"].form-control:focus{
    border-color:#2196F3;
    box-shadow:0 0 0 .2rem rgba(33,150,243,.15);
}

/* Tombol Choose File */
input[type="file"].form-control::file-selector-button{
    height:38px;
    padding:0 18px;
    margin-right:15px;

    border:none;
    border-radius:8px;

    background:#2196F3;
    color:#fff;

    font-weight:600;
    cursor:pointer;

    transition:.25s;
}

input[type="file"].form-control:hover::file-selector-button{
    background:#1976D2 !important;
}

/* Firefox */
input[type="file"].form-control::-webkit-file-upload-button{
    height:38px;
}

.faq .cta-actions .btn-cta-primary {
    display: inline-block;
    padding: 16px 32px;
    background: var(--accent-color);
    color: var(--contrast-color);
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.faq .faq-item.faq-active .faq-answer {
    max-height: 600px !important;
}

.faq .questions-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-color);
    padding: 8px 16px;
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    border-radius: 20px;
}

.why-us .features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
}

.why-us .features-grid .grid-item .grid-icon {
    width: 60px;
    height: 60px;
}

.why-us .features-grid .grid-item .grid-icon i {
    font-size: 40px;
}