.form-group{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

label{
    padding-left: 1rem !important;
}

.form-control, .form-select{
    border-radius: 26px;
    height: 2.8rem;
    -webkit-box-shadow: 0px 4px 6px -4px rgba(69,72,92,1);
    -moz-box-shadow: 0px 4px 6px -4px rgba(69,72,92,1);
    box-shadow: 0px 4px 6px -4px rgba(69,72,92,1);
}

.form-select{
    border-radius: 6px;
    height: 2.8rem;
    -webkit-box-shadow: 0px 4px 6px -4px rgba(69,72,92,1);
    -moz-box-shadow: 0px 4px 6px -4px rgba(69,72,92,1);
    box-shadow: 0px 4px 6px -4px rgba(69,72,92,1);
}


.from_top{
    margin-top: 120px !important;
}


.textarea{
    height: 6.2rem;
}

.btn{
    border-radius: 26px !important;

}


/* CSS Grid styles */
.custom-file-input {
    display: grid;
    grid-template-columns: 3fr  1fr;
    gap: 1rem;
    display: flex;
    justify-content: space-between;
}


.img_wrap{
    -webkit-box-shadow: 0px 4px 6px -4px rgba(69,72,92,1);
    -moz-box-shadow: 0px 4px 6px -4px rgba(69,72,92,1);
    box-shadow: 0px 4px 6px -4px rgba(69,72,92,1);
    border-radius: 16px;
    background-color: #eff0f1;

}



  .custom-file-input img {
    max-width: 100%;
    max-height: 160px; /* Set your desired max height here */
    object-fit: contain;
  }





.field-wrap{
    margin-top: 1rem;
    margin-bottom: 1rem;
}



.danger {
    border-color: #dc3545;

}

.success {
    border-color: #28a745;
    border: 2px solid  #28a745;;
}




.sticky-top{
    top:12rem !important
}

.ad_box {
width: 400px;

}


.form-control:focus {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-body-bg) !important;
    border-color: #608ed3 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 .45rem rgba(13, 110, 253, .25) !important;
}




.banner {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .banner img {
    width: 100%;
    height: auto;
    display: block;
  }

  .banner .head {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #0061a1 !important;
    text-align: center;
    width: 50%;
    padding: 20px;
    background-color:#ffffffc7;
    margin: 0;
    border-radius:12px;
  }

  @media (max-width: 768px) {
    .banner .head {
      display:none !important;
    }
  }

  @media (max-width: 480px) {
    .banner .head {
      display:none !important;
    }
  }

  .text-danger{
    font-size: .922rem ;
    padding-left:1rem !important;
    margin-top:.5rem !important;
    color:red !important;
  }

  .form-control[type=file]:not(:disabled):not([readonly]) {
    cursor: pointer;
    border-radius: 12px !important;
    padding-bottom: 0px;
    height: 2.2rem;
  }


/* Existing valid styles */
  .was-validated .form-control:valid:focus {
    border-color: var(--bs-form-valid-border-color);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .25);
  }

/* Ensure invalid fields maintain their red border */
  .form-control.is-invalid {
    border-color: var(--bs-form-invalid-border-color) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25) !important;
  }

/* Ensure focus on invalid fields does not change to green */
  .form-control.is-invalid:focus {
    border-color: var(--bs-form-invalid-border-color) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25) !important;
  }


  .img-container {
    max-width: 100%;
    max-height: 400px;
    overflow: hidden;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}


.modal-content{
  background-color: #4d4d4d !important;
}

.modal-footer{
  justify-content:space-around !important;
}
















@media (max-width: 768px) {

        /* CSS Grid styles */
    .custom-file-input {
        display: block !important;
        height: auto !important;
    }

    #image-preview{
        display: block;
        width: 80%;
        margin-top: 2rem !important;
    }

}