.popup .overlay{
    position: fixed;
    top:0px;
    left:0px;
    width:100vw;
    height:100vh;
    background-color: rgba(0,0,0,0.7);
    z-index: 1;
}

.popup .content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0);
    width: 450px;
    background-color: #ffffff;
    padding: 20px;
  /* Light buttons - for non-login buttons */
.btn-light:not(.navbar .btn-outline-light) {
    background-color: #f8f9fa !important;
    border-color: #f8f9fa !important;
    color: #212529 !important;
    border-radius: 0 !important;
}

/* Dark buttons */
.btn-dark {
    background-color: #212529 !important;
    border-color: #212529 !important;
    color: white !important;
    border-radius: 0 !important;
}

.btn-outline-dark {
    background-color: #212529 !important;
    border-color: #212529 !important;
    color: white !important;
    border-radius: 0 !important;
}

/* Login/Register button styling - Keep original colors but remove rounded edges */
    z-index: 2;
    text-align:center;
    padding: 20px;
    box-sizing: border-box;

}

.popup .close-btn{
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background: #222;
    color: #fff;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
}

.popup.active .overlay{
    display: block;
}

.popup.active .content{
    transition:all 300ms ease-in-out;
    transform: translate(-50%,-50%) scale(0);
}



   /* Your embedded CSS styles */
.footer {
    text-align: center;
    display: flex;
    justify-content: space-between;
}
.footer a {
    color: rgb(0, 145, 255); 
}

.footer-column {
    flex: 2;
}


/* footer section start */
*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
  }
  body{
    font-size:14px;
    background: #fff;
      max-width:1920px;
      margin:0 auto;
    overflow-x:hidden;
   
  
  }
  #footer{
    background: #033b61;
      padding: 2rem;
    /* padding-top: 5rem; */
    padding-top: 2rem;
      padding-bottom: 20px;
      color: white;
    
  }
  #footer h5 {
    color: white;
  }
  #footer a {
    color: white;
  }
  #footer a:hover {
    color: #fcd462;
  }
  #footer .address-links a {
    color: white;
  }
  #footer .address-links a:hover {
    color: #fcd462;
  }
  #footer .use-links a {
    color: white;
  }
  #footer .use-links a:hover {
    color: #fcd462;
  }
  #footer2{
    background: #033b61;
      padding: 2rem;
      margin-top: 0px;
    /* padding-top: 5rem; */
    padding-top: 2rem;
      padding-bottom: 20px;
      color: white;
    
  }
  #footer2 h5 {
    color: white;
  }
  #footer2 a {
    color: white;
  }
  #footer2 a:hover {
    color: #fcd462;
  }

 
 
  .copy-right-sec{
    padding: 1rem;
      background: #033b61;
      color: #fff;
      text-align: center;
  }
  .copy-right-sec a{
    color: #fcd462;
      font-weight: 500;
  }
  .copy-right-sec a:hover{
    color: #ffffff;
      text-decoration: none;
  }
  a{
    text-decoration:none;
  }

.form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 300px; /* Set minimum width */
}

/* Custom Sasol Styling */

/* FORCE OVERRIDE ALL BOOTSTRAP ROUNDED CORNERS */
*, *::before, *::after, 
.btn, button, input, textarea, select, .form-control, .form-select,
.card, .badge, .alert, .modal-content, .dropdown-menu,
.nav-pills .nav-link, .pagination .page-link {
    border-radius: 0 !important;
}

/* Global Font Styling - Arial for all elements */
*, *::before, *::after {
    font-family: Arial, sans-serif !important;
}

/* BUTTON STYLING - AGGRESSIVE OVERRIDE */
.btn, button, input[type="button"], input[type="submit"], input[type="reset"],
a.btn, span.btn {
    border-radius: 0 !important;
    font-family: Arial, sans-serif !important;
    font-weight: normal !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
}

/* Primary buttons - Solid Dark Blue */
.btn-primary, a.btn-primary, span.btn-primary {
    background-color: #033b61 !important;
    background-image: none !important;
    border-color: #033b61 !important;
    color: white !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
a.btn-primary:hover, a.btn-primary:focus, a.btn-primary:active {
    background-color: #022a47 !important;
    background-image: none !important;
    border-color: #022a47 !important;
    color: white !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
}

/* Outline Primary buttons - Convert to solid dark blue */
.btn-outline-primary, a.btn-outline-primary {
    background-color: #033b61 !important;
    background-image: none !important;
    border-color: #033b61 !important;
    color: white !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
a.btn-outline-primary:hover, a.btn-outline-primary:focus, a.btn-outline-primary:active {
    background-color: #022a47 !important;
    background-image: none !important;
    border-color: #022a47 !important;
    color: white !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
}

/* Convert ALL outline buttons to solid */

/* ULTRA AGGRESSIVE BORDER RADIUS OVERRIDE */
.btn, .btn:hover, .btn:focus, .btn:active, .btn.active,
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-outline-primary, .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
.btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
.btn-outline-secondary, .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active,
.btn-success, .btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-outline-success, .btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active,
.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning:active,
.btn-outline-warning, .btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active,
.btn-info, .btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-outline-info, .btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active,
.btn-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-outline-danger, .btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active,
.btn-light, .btn-light:hover, .btn-light:focus, .btn-light:active,
.btn-outline-light, .btn-outline-light:hover, .btn-outline-light:focus, .btn-outline-light:active,
.btn-dark, .btn-dark:hover, .btn-dark:focus, .btn-dark:active,
.btn-outline-dark, .btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active,
button, input[type="button"], input[type="submit"], input[type="reset"] {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    -o-border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    font-family: Arial, sans-serif !important;
}

/* Convert ALL outline buttons to solid */
.btn-outline-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
    border-radius: 0 !important;
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
    background-color: #545b62 !important;
    border-color: #545b62 !important;
    color: white !important;
    border-radius: 0 !important;
}

.btn-outline-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
    border-radius: 0 !important;
}

.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
    background-color: #146c43 !important;
    border-color: #146c43 !important;
    color: white !important;
    border-radius: 0 !important;
}

.btn-outline-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000 !important;
    border-radius: 0 !important;
}

.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active {
    background-color: #ffca2c !important;
    border-color: #ffca2c !important;
    color: #000 !important;
    border-radius: 0 !important;
}

.btn-outline-info {
    background-color: #033b61 !important;
    border-color: #033b61 !important;
    color: white !important;
    border-radius: 0 !important;
}

.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active {
    background-color: #024a7a !important;
    border-color: #024a7a !important;
    color: white !important;
    border-radius: 0 !important;
}

.btn-outline-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
    border-radius: 0 !important;
}

.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active {
    background-color: #bb2d3b !important;
    border-color: #bb2d3b !important;
    color: white !important;
    border-radius: 0 !important;
}

.btn-outline-light {
    background-color: #f8f9fa !important;
    border-color: #f8f9fa !important;
    color: #000 !important;
    border-radius: 0 !important;
}

.btn-outline-light:hover, .btn-outline-light:focus, .btn-outline-light:active {
    background-color: #d3d4d5 !important;
    border-color: #d3d4d5 !important;
    color: #000 !important;
    border-radius: 0 !important;
}

.btn-outline-dark {
    background-color: #212529 !important;
    border-color: #212529 !important;
    color: white !important;
    border-radius: 0 !important;
}

.btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active {
    background-color: #424649 !important;
    border-color: #424649 !important;
    color: white !important;
    border-radius: 0 !important;
}

/* Secondary buttons - Keep Bootstrap default but remove rounded edges */
.btn-secondary {
    border-radius: 0 !important;
}

.btn-outline-secondary {
    border-radius: 0 !important;
}

/* Warning buttons - Solid colors, no rounded edges */
.btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #212529 !important;
    border-radius: 0 !important;
}

.btn-outline-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #212529 !important;
    border-radius: 0 !important;
}

/* Success buttons - Solid colors, no rounded edges */
.btn-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
    border-radius: 0 !important;
}

.btn-outline-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
    border-radius: 0 !important;
}

/* Info buttons - Solid colors, no rounded edges */
.btn-info {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
    color: #000 !important;
    border-radius: 0 !important;
}

.btn-outline-info {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
    color: #000 !important;
    border-radius: 0 !important;
}

/* Danger buttons - Solid colors, no rounded edges */
.btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
    border-radius: 0 !important;
}

.btn-outline-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
    border-radius: 0 !important;
}

/* Login/Register button styling - Keep original colors but remove rounded edges */
.btn-outline-light {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    font-family: Arial, sans-serif !important;
    /* Keep Bootstrap's default outline-light colors */
}

.btn-outline-light:hover, .btn-outline-light:focus, .btn-outline-light:active {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    /* Keep Bootstrap's default hover colors */
}

/* Overview text styling - normal font weight */
h2:contains("Overview"), 
.overview-text h2,
.overview-text h5,
.overview-text h6 {
    font-weight: normal !important;
}

/* General overview section styling */
.overview-section h2,
.overview-section h5,
.overview-section h6 {
    font-weight: normal !important;
}

/* Specific heading overrides for create-application pages */
h6 {
    font-weight: normal !important;
}

/* Progress bar styling for proof of donation */
.progress-bar.bg-success {
    background-color: #033b61 !important; /* Use navbar blue color */
}

/* Alternative progress bar colors using blue shades */
.progress-bar-blue {
    background-color: #033b61 !important; /* Dark blue like navbar */
}

.progress-bar-blue-light {
    background-color: #1a6fa8 !important; /* Medium blue */
}

.progress-bar-blue-medium {
    background-color: #0a5a7a !important; /* Blue-green */
}

/* Status badge styling - Different shades of blue similar to navbar */
.badge.bg-success {
    background-color: #0a5a7a !important; /* Darker blue-green for success/approved */
    color: white !important;
}

.badge.bg-warning {
    background-color: #1a6fa8 !important; /* Medium blue for warning/reviewing */
    color: white !important;
}

.badge.bg-danger {
    background-color: #2c5aa0 !important; /* Medium-dark blue for danger/rejected */
    color: white !important;
}

.badge.bg-secondary {
    background-color: #033b61 !important; /* Same as navbar for secondary/pending */
    color: white !important;
}

.badge.bg-info {
    background-color: #4a8bc2 !important; /* Lighter blue for info */
    color: white !important;
}

.badge.bg-primary {
    background-color: #033b61 !important; /* Same as navbar for primary */
    color: white !important;
}

/* Navbar specific styling */
.navbar-brand-container {
    min-width: 200px;
}

.navbar-logo-container {
    min-width: 140px;
}

/* Ensure navbar has enough height for logo */
.navbar {
    min-height: 80px !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Logo safe space styling */
.navbar-logo-container img {
    height: 60px !important;
    max-width: 120px !important;
    object-fit: contain !important;
    margin-left: auto !important;
    display: block !important;
}

/* Dark buttons */
.btn-dark {
    background-color: #212529 !important;
    border-color: #212529 !important;
    color: white !important;
    border-radius: 0 !important;
}

.btn-outline-dark {
    background-color: #212529 !important;
    border-color: #212529 !important;
    color: white !important;
    border-radius: 0 !important;
}

/* Form Controls - Remove rounded edges and ensure solid styling */
.form-control, .form-select, input, textarea, select {
    border-radius: 0 !important;
    font-family: Arial, sans-serif !important;
}

/* Profile Card Styling */
.profile-card {
    border-radius: 0 !important;
    font-family: Arial, sans-serif !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.profile-header {
    background-color: #00aeef !important;
    border-radius: 0 !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
}

.profile-card .card-body {
    background-color: white !important;
    color: black !important;
    font-family: Arial, sans-serif !important;
    border-radius: 0 !important;
}

.profile-btn {
    border-radius: 0 !important;
    font-family: Arial, sans-serif !important;
    background-color: white !important;
    color: #00aeef !important;
    border-color: white !important;
}

.profile-btn:hover {
    background-color: #f8f9fa !important;
    color: #0088cc !important;
    border-color: #f8f9fa !important;
    border-radius: 0 !important;
}

/* Cards and Containers */
.card {
    border-radius: 0 !important;
    font-family: Arial, sans-serif !important;
}

.card-header {
    border-radius: 0 !important;
    font-family: Arial, sans-serif !important;
}

/* Badges - Solid colors, no rounded edges */
.badge {
    border-radius: 0 !important;
    font-family: Arial, sans-serif !important;
}

/* Tables */
.table {
    font-family: Arial, sans-serif !important;
}

.table th, .table td {
    font-family: Arial, sans-serif !important;
}

/* Navigation */
.navbar-brand, .nav-link {
    font-family: Arial, sans-serif !important;
}

/* Headings - Bold for most, but regular for landing page */
h1, h2, h3, h4, h5, h6 {
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
}

/* Landing page specific - Make text regular weight */
.text-center h3, .text-center h6 {
    font-weight: normal !important;
}

/* Create application page - Make overview text normal weight */
.container h6,
form h6,
.wizard-step h6 {
    font-weight: normal !important;
}

/* Additional specific overrides for overview sections */
h6[style*="font-weight: normal"] {
    font-weight: normal !important;
}

/* General text */
p, span, div, label, small {
    font-family: Arial, sans-serif !important;
}

/* Force override ALL Bootstrap rounded corners */
.rounded, .rounded-top, .rounded-end, .rounded-bottom, .rounded-start,
.rounded-circle, .rounded-pill, .rounded-1, .rounded-2, .rounded-3 {
    border-radius: 0 !important;
}

/* Override any remaining border-radius properties */
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.btn-group > .btn:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Input groups */
.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}