:root {
      --primary: #b37258;
      --secondary: #16a34a;
      --dark: #0f172a;
      --light: #f8fafc;
      --muted: #64748b;
    }

 body {
      background: var(--light);
      color: var(--dark);
    }


    
 .container-involved {
      max-width: 1200px;
      margin: auto;
      padding: 60px 20px;
    }
 .section-header {
      text-align: center;
      margin-bottom: 50px;
    }

    .section-header h1 {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 15px;
    }

    .section-header p {
      font-size: 18px;
      color: var(--muted);
      max-width: 700px;
      margin: auto;
    }
  /* Buttons */
    .btn-invo {
      display: inline-block;
      margin-top: 20px;
      padding: 14px 28px;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 600;
      transition: all .3s ease;
    }

    .btn-primary {
      background: var(--primary);
      color: #fff;
    }

    .btn-primary:hover {
      background: #744431;
    }

    .btn-secondary {
      background: var(--secondary);
      color: #fff;
    }

    .btn-secondary:hover {
      background: #15803d;
    }
    /* Cards */
    .umai-grid-involve {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 30px;
    }

    .umai-card-involve {
      background: #e6d6d6f5;
      border-radius: 16px;
      padding: 35px 30px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.05);
      transition: transform .3s ease, box-shadow .3s ease;
      text-align: center;
    }

    .umai-card-involve:hover {
      transform: translateY(-8px);
      box-shadow: 0 30px 60px rgba(0,0,0,0.08);
    }

    .umai-card-involve h3 {
      font-size: 18px;
      margin-bottom: 12px;
    }

    .umai-card-involve p {
      font-size: 15px;
      color: var(--muted);
    }


 /* ---------- Modal Start ---------- */
    .modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.6);
justify-content: center;
align-items: center;
z-index: 800;
}


.modal-box {
background: #fff;
padding: 30px;
border-radius: 16px;
width: 100%;
max-width: 420px;
position: relative;
}


.modal-box input,
.modal-box textarea {
width: 100%;
margin-bottom: 12px;
padding: 12px;
}


.modal-box span {
position: absolute;
top: 15px;
right: 20px;
cursor: pointer;
}


input:focus,
textarea:focus {
  border-color: #15887c;
  outline: none;
}

input, textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}


 /* ---------- BUTTON ---------- */
.umai-btn-sumit {
  margin-top: 8px;
  width: 25%;
  padding: 9px;
  background: #2e6c8a;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}

.umai-btn-sumit:hover {
  background: #327799;
}

form {
  text-align: end;
}


.alert.alert-info.alert-dismissible.fade.show {
  color: #146c11b8;
  text-align: center;
  padding-bottom: 25px;
}
 
 /* ---------- Modal End ---------- */