* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.site-bg1{

    background: radial-gradient(35.36% 35.36% at 100% 25%, #0000 66%, #def3ff 68% 70%, #0000 72%) 32px 32px / calc(2* 32px) calc(2* 32px), radial-gradient(35.36% 35.36% at 0 75%, #0000 66%, #def3ff 68% 70%, #0000 72%) 32px 32px / calc(2* 32px) calc(2* 32px), radial-gradient(35.36% 35.36% at 100% 25%, #0000 66%, #def3ff 68% 70%, #0000 72%) 0 0 / calc(2* 32px) calc(2* 32px), radial-gradient(35.36% 35.36% at 0 75%, #0000 66%, #def3ff 68% 70%, #0000 72%) 0 0 / calc(2* 32px) calc(2* 32px), repeating-conic-gradient(#ffffff 0 25%, #0000 0 50%) 0 0 / calc(2* 32px) calc(2* 32px), radial-gradient(#0000 66%, #def3ff 68% 70%, #0000 72%) 0 calc(32px / 2) / 32px 32px #ffffff;

}
ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
}

body {
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: #505050;
    background: #f9f9f9;
    background-attachment: fixed;
    background-size: cover;
    background: radial-gradient(35.36% 35.36% at 100% 25%, #0000 66%, #def3ff 68% 70%, #0000 72%) 32px 32px / calc(2* 32px) calc(2* 32px), radial-gradient(35.36% 35.36% at 0 75%, #0000 66%, #def3ff 68% 70%, #0000 72%) 32px 32px / calc(2* 32px) calc(2* 32px), radial-gradient(35.36% 35.36% at 100% 25%, #0000 66%, #def3ff 68% 70%, #0000 72%) 0 0 / calc(2* 32px) calc(2* 32px), radial-gradient(35.36% 35.36% at 0 75%, #0000 66%, #def3ff 68% 70%, #0000 72%) 0 0 / calc(2* 32px) calc(2* 32px), repeating-conic-gradient(#ffffff 0 25%, #0000 0 50%) 0 0 / calc(2* 32px) calc(2* 32px), radial-gradient(#0000 66%, #def3ff 68% 70%, #0000 72%) 0 calc(32px / 2) / 32px 32px #ffffff;
}

.header {
    background-color: #ffffff;
    padding: 10px 0;
    box-shadow: 0px 6px 28px -8px rgb(143 57 144 / 21%);
}

.footer {
    background-color: #ffffff;
    box-shadow: 0px -6px 28px -8px rgb(143 57 144 / 21%);
}

.form-box,
.invoice-box {
    box-shadow: 0px 2px 10px -5px rgb(0 0 0 / 38%);
    overflow: hidden;
    border-radius: 0px 0px 15px 15px;
    background-color: #ffffff;
}

.form-box h2,
.invoice-box h2 {
    font-size: 24px;
    text-align: center;
    margin: 0 0 20px;
    border-bottom: 1px solid rgb(0 0 0 / 6%);
    background: linear-gradient(90deg, #6610f2, #0d6efd);
    padding: 1em;
    color: #fff;
}

.form-box h3 {
    font-size: 18px;
    color: #000;
    /* background-color: #28409b; */
}

.form-box tr h3 {
    font-size: 22px;
    color: #ffffff;
    line-height: 32px;
    background: #f87a4b;
    margin: 0;
    text-align: center;
    padding: 10px;
}

.form-box .form-control {
    border: 1px solid #dadada;
    border-radius: 8px;
}

.form-check-input {
    width: 18px;
    height: 18px;
    margin-right: .5rem;
}

label.error {
    color: #f00;
    font-size: 12px;
}

.info.bg-warning {
    padding: 20px;
    border-radius: 10px;
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 18px;
}

.info ul {
    list-style: disc;
    margin: 0 0 0 20px;
}

.info ul li {
    padding: 5px 0;
}

.accompany-details .acc-bg {
    background: #f5f5f5;
    padding: 10px 0;
    border-bottom: 2px dashed #e1e1e1;
}

.accompany-details li:last-child {
    border: none;
}

label.pg_upload {
    padding: 20px 10px;
    background: #fff;
    border: 2px dashed #2196f3;
    display: block;
    text-align: center;
    margin: 0 0 20px;
    color: #2196f3;
    cursor: auto;
}

.workshop-list {
    padding: 15px;
    background-color: #f5eef5;
    border: 2px solid #d3c2d3;
    border-radius: 15px;
}

.workshop-list li {
    display: block;
    padding: 8px 0;
    font-size: 14px;    
    vertical-align: top;
    line-height: 23px;
}

.reg-table th,
.reg-table td {
    padding: 1em;
    font-size: 14px;
}
/* ================ */
.footer-menu{
    display: flex; text-align: center!important;
}

.footer-menu li a{color: black; padding: 5px 10px; text-align: center; font-weight: bold;}

.footer-menu li a:hover{color: #2f5e8e;}

/* ---------- Form Container ---------- */
.form-box {
  background: #ffffff;
  border-radius: 0px 0px 14px 15px;
  box-shadow: 0px 4px 20px rgba(0,0,0,0.1);
  padding: 20px;
}

/* ---------- Labels ---------- */
.form-box label {
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

/* ---------- Inputs Always Colored ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea {
  background-color: #e6f0ff; /* light blue */
  border-radius: 10px;
  border: 2px solid #d0e4ff;
  padding: 10px;
}

select {
  background-color: #fff0f5; /* light pink */
  border-radius: 10px;
  border: 2px solid #f5c2e7;
  padding: 10px;
}

input[type="file"] {
  background-color: #e8ffe6; /* light green */
  border-radius: 10px;
  border: 2px solid #c2f5c2;
  padding: 8px;
}

textarea {
  background-color: #fffde6; /* light yellow */
  border: 2px solid #f5e8a3;
}

/* ---------- Keep Hover/Focus Glow ---------- */
.form-control:hover, .form-select:hover {
  border-color: #0d6efd;
  box-shadow: 0px 0px 6px rgba(13, 110, 253, 0.2);
}

.form-control:focus, .form-select:focus {
  border-color: #198754;
  box-shadow: 0px 0px 8px rgba(25, 135, 84, 0.3);
}

/* ---------- Submit Button ---------- */
#submit {
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  padding: 12px;
  border-radius: 50px;
  background: linear-gradient(90deg, #0d6efd, #6610f2);
  border: none;
  color: #fff;
  transition: 0.3s;
}

#submit:hover {
  background: linear-gradient(90deg, #6610f2, #0d6efd);
  transform: scale(1.02);
  box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
}

/* ----- General styling ----- */
.form-control, .form-select {
  border-radius: 10px;
  border: 2px solid transparent;
  padding: 10px;
  font-size: 15px;
  transition: 0.3s;
  color: #333;
  font-weight: 500;
}

/* ----- Unique colors for each field ----- */
#title { background-color: #e6f0ff; border-color: #b3d1ff; }       /* light blue */
#fname { background-color: #fff0f5; border-color: #f5c2e7; }       /* pink */
#lname { background-color: #f0fff4; border-color: #b3f0c2; }       /* green */
#badgename { background-color: #fffde6; border-color: #f5e8a3; }   /* yellow */
#profilepic { background-color: #f3e6ff; border-color: #d1b3ff; }  /* purple */
#dob { background-color: #e6fffb; border-color: #b3f5ec; }         /* aqua */
#email { background-color: #ffe6e6; border-color: #ffb3b3; }       /* light red */
#mobile { background-color: #e6fff2; border-color: #b3f5d9; }      /* mint */
#medical_council_no { background-color: #e6f7ff; border-color: #b3e0f5; }
#designation { background-color: #fff5e6; border-color: #f5d6b3; }
#institute { background-color: #f9e6ff; border-color: #e0b3f5; }
#address { background-color: #f0ffe6; border-color: #c2f5b3; }
#countryId { background-color: #e6f0ff; border-color: #b3d1ff; }
#stateId { background-color: #fff0f5; border-color: #f5c2e7; }
#cityId { background-color: #f0fff4; border-color: #b3f0c2; }
#pincode { background-color: #fffde6; border-color: #f5e8a3; }

/* Registration fields */
#regTyp { background-color: #f3e6ff; border-color: #d1b3ff; }
#regCat { background-color: #e6fffb; border-color: #b3f5ec; }
#accPerson { background-color: #ffe6e6; border-color: #ffb3b3; }
#mem_id { background-color: #e6fff2; border-color: #b3f5d9; }
#upload_pg { background-color: #fff5e6; border-color: #f5d6b3; }

/* Spouse & Accompanying */
input[name="spouse_name"] { background-color: #f9e6ff; border-color: #e0b3f5; }
input[name="spouse_age"] { background-color: #f0ffe6; border-color: #c2f5b3; }
#a1name { background-color: #e6f0ff; border-color: #b3d1ff; }
#a1age { background-color: #fff0f5; border-color: #f5c2e7; }
#a2name { background-color: #f0fff4; border-color: #b3f0c2; }
#a2age { background-color: #fffde6; border-color: #f5e8a3; }
#a3name { background-color: #f3e6ff; border-color: #d1b3ff; }
#a3age { background-color: #e6fffb; border-color: #b3f5ec; }

/* ----- Hover/Focus glow ----- */
.form-control:hover, .form-select:hover,
.form-control:focus, .form-select:focus {
  box-shadow: 0px 0px 8px rgba(0,0,0,0.15);
  border-color: #0d6efd;
}

#gen{
     background-color: #e6ffe9; border-color: #adf5a3;
}

.photo-frame {
  width: 180px;
  height: auto;
  display: inline-block;
}
.photo-frame img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 2px solid #ccc;
  border-radius: 10px;
}