@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
    *{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body{
      padding: 0;
      margin: 0;
      min-width: 320px;
      box-sizing: border-box;
      background-color: #0E0C0C;
      background-image: url(/images/bg-01.png);
      background-size: cover;
      background-repeat: no-repeat;
      font-family: "Roboto", sans-serif;
      background-position: 0 98px;
    }
    .container{
        background-image: url(/images/bg-02.png);
        background-position: 0 100%;
        background-repeat: no-repeat;
        padding: 97px 20px;
    }
    .holder{
      max-width: 1030px;
      margin: 0 auto;
      padding: 40px;
      border-radius: 20px;
      backdrop-filter: blur(15px);
      border: 1px solid rgba(167,165,165, 0.4);
    }
    @media (max-width: 768px) {
      .holder{
        padding: 20px;
      }
    }
    h1{
      margin-bottom: 16px;
    }
    .title{
      font-size: 31px;
      font-weight: 700;
      color: #FFFFFF;
      display: block;
      line-height: 100%;
      margin-bottom: 8px;
    }
    .sub-title{
      color: #77B3B1;
      font-size: 20px;
      font-weight: 400;
      display: block;
      line-height: 100%;
      margin-bottom: 36px;
    }
    .col{
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .col.col-add{
      flex-wrap: nowrap;
    }
    @media (max-width: 768px) {
      .col.col-add{
        flex-wrap: wrap;
      }
    }
    .col.col-add .col{
      flex: 1;
    }
    @media (max-width: 768px) {
      .col.col-add .col{
        flex: 1 1 100%; /* full width */
        min-width: 100%;
      }
    }
    .form-group{
      flex: 1;
      margin-bottom: 8px;
      position: relative;
    }
    @media (max-width: 768px) {
      .form-group{
        flex: 1 1 100%; /* full width */
        min-width: 100%;
      }
    }
 
    .form-group .label{
      display: block;
      width: 100%;
      font-size: 13px;
      line-height: 20px;
      color: #F1F7F7;
      text-align: left;
      margin-bottom: 8px;
    }
    .form-group .label span{
      color: #77B3B1;
      margin: 0 0 0 2px;
    }
    .form-group-holder {
      display: flex;
      gap: 8px;
    }
    input,textarea{
      height: 52px;
      background-color: #282221;
      border-radius: 12px;
      width: 100%;
      border: 0;
      box-shadow: none;
      outline: none;
      padding: 16px 12px;
      font-size: 16px;
      line-height: 20px;
      color: #fff;
      text-align: left;
    }
    textarea{
      height: 126px;
      resize: none;
    }
    ::placeholder{
      font-size: 16px;
      line-height: 20px;
      color: #fff;
      font-family: "Roboto", sans-serif;
    }
    textarea::placeholder{
      font-size: 16px;
      line-height: 20px;
      color: #fff !important;
      font-family: "Roboto", sans-serif;
    }
    .success-message {
      padding: 14px 18px;
      margin: 10px 0;
      border-radius: 6px;
      font-size: 16px; 
      background: #e6f9e6;
      color: #1f7a1f;
      border-left: 5px solid #1f7a1f;
    }
   .btn-area button{
      background-color: #77B3B1;
      border-radius:12px; 
      height: 56px; 
      text-align: left;
      font-size: 20px;
      color: #F1F7F7;
      cursor: pointer;
      border: 0;
      padding: 14px 18px 14px 55px;
      position: relative;
    }
    .btn-area button:hover{
      background-color: #6BA19F;
    }
   .btn-area button svg{
      margin:-2px 2px 0 0;
      display: inline-block;
      vertical-align: middle;
          position: absolute;
    left: 19px;
    top: 19px;
    }
   
    /* .photo-upload-section{
      margin-bottom: 28px;
    } */
    #photo-preview-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
 
    .photo-preview {
      position: relative;
      width: 112px;
      height: 85px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #77B3B1;
      animation: fadeIn 0.5s ease forwards;
    }
 
    .photo-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
 
    .photo-preview video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
    }
 
    .remove-photo {
      position: absolute;
      top: 2px;
      right: 4px;
      background: #fff;
      border: none;
      color: #000;
      font-size: 13px;
      cursor: pointer;
      border-radius: 50%;
      width: 14px;
      height: 14px;
      line-height: 14px;
      text-align: center;
    }
 
    #add-photo-btn {
      width: 112px;
      height: 83px;
      border-radius: 8px;
      background-color: transparent;
      border: 1px solid #77B3B1;
      font-size: 13px;
      color: #77B3B1;
      font-weight: 400;
      text-align: center;
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    #add-photo-btn svg{
      display: block;
      margin: 0 auto 4px;
    }
    #add-photo-btn:hover {
      background: #598685;
      border-color: #598685;
      color: #fff;
    }
    #add-photo-btn:hover svg path{
      fill: #fff;
    }
    .btn-sec{
      display: flex;
      justify-content: flex-end;
      align-items: baseline;
      flex-wrap: wrap;
    }
    .checkbox-sec{
      padding: 16px 0;
      color: #F1F7F7;
      font-size: 13px;  
    }
    .checkbox-label {
      display: flex;
      align-items: center;
      cursor: pointer;
      gap: 8px;
      font-family: sans-serif;
      user-select: none;
    }
 
    .checkbox-label input {
      display: none; /* hide default checkbox */
    }
 
    /* Custom box */
    .checkbox-label .checkmark {
      width: 20px;
      height: 20px;
      border: 2px solid #F1F7F7;
      border-radius: 4px;
      display: inline-block;
      position: relative;
      background-color: #F1F7F7;
      transition: all 0.3s ease;
    }
 
    /* When checked — change color */
    .checkbox-label input:checked + .checkmark {
      background-color: #77B3B1; /* your color */
      border-color: #77B3B1;
    }
 
    /* Optional: add a tick icon */
    .checkbox-label input:checked + .checkmark::after {
      content: "";
      position: absolute;
      left: 5px;
      top: 1px;
      width: 5px;
      height: 10px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    @keyframes slideRight {
      from { transform: translateX(0); }
      to { transform: translateX(10px); }
    }
 
    @keyframes slideLeft {
      from { transform: translateX(30px); }
      to { transform: translateX(0); }
    }
 
    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.8); }
      to { opacity: 1; transform: scale(1); }
    }
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
 
    /* For Firefox */
    input[type=number] {
      -moz-appearance: textfield;
    }