:root {
  --pulse-btn-bg: #03bbbb;  /* Energetic turquoise */
  --pulse-btn-hover-bg: #ea3000;  /* Bright red for hover */
  --pulse-btn-text-color: #ffffff;  /* White text */
  --pulse-btn-shadow: rgba(0, 0, 0, 0.2);  /* Slight shadow */
  --pulse-btn-hover-shadow: rgba(0, 0, 0, 0.3);  /* Stronger shadow on hover */
  --pulse-bg-start: rgba(3, 187, 187, 0.9);  /* Bold turquoise */
  --pulse-bg-end: rgba(234, 48, 0, 0.9);    /* Intense red */
}



.content-pulse {
  /* background: linear-gradient(135deg, var(--pulse-bg-start), var(--pulse-bg-end));  /* Smooth gradient for dynamic look */
   border: var(--pulse-border);  /* No border */
   border-radius: var(--pulse-border-radius);  /* Softer corners */
   padding: 0px 10px 10px 10px;
   box-shadow: var(--pulse-box-shadow);  /* Soft shadow */
   position: relative;  /* Allow for inner effects */
   overflow: hidden;  /* Hide overflow for animation */
 
   /* Light animation to keep background dynamic */
   animation: pulse-bg-move var(--pulse-animation-duration) infinite alternate var(--pulse-animation-ease);
 }
 /* Subtle animation to move the gradient */
 @keyframes pulse-bg-move {
   0% {
     background-position: 0% 0%;
   }
   100% {
     background-position: 100% 100%;
   }
 }
 
 /* Adding a soft background texture */
 .content-pulse::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   opacity: 0.3;
   /* background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); /* Texture for subtle depth */
   background-size: 400px 400px;
   pointer-events: none;  /* Allow interaction without blocking clicks */
   z-index: 1;
 }
 
 /* Ensuring the inner content has a higher z-index */
 .content-pulse > * {
   position: relative;
   z-index: 2;
 }
 

.pulse-btn {
  background-color: var(--pulse-btn-bg) !important;
  color: var(--pulse-btn-text-color) !important;
  box-shadow: 0px 4px 8px var(--pulse-btn-shadow);
  border: none;
  border-radius: 50px;
  padding: 12px 30px;
  font-size: 20px;
  font-weight: bold;
  transition: transform 0.2s ease-out, background-color 0.3s ease-out, box-shadow 0.3s ease-out;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.pulse-btn:hover, .pulse-btn:focus {
  background-color: var(--pulse-btn-hover-bg);
  box-shadow: 0px 12px 18px var(--pulse-btn-hover-shadow);
  transform: scale(1.2);
}

.pulse-btn:active {
  animation: pulse 0.3s ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.pulse-form {
  animation: flash-bg 3s infinite;
  padding: 20px;
  border-radius: 25px;
  background: linear-gradient(135deg, var(--pulse-bg-start), var(--pulse-bg-end));
  background-size: 400% 400%;
}

@keyframes flash-bg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

 /* Flashing Background Animation */
 @keyframes flash-bg {
   0% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
   100% { background-position: 0% 50%; }
 }
 



/* Updated Text Background Classes with Branding Colors */
.text-bg-primary {
    color: #fff !important;
    background-color: rgba(234, 48, 0, var(--bs-bg-opacity, 1)) !important;
}

.text-bg-secondary {
    color: #fff !important;
    background-color: rgba(3, 187, 187, var(--bs-bg-opacity, 1)) !important;
}

.text-bg-success {
    color: #fff !important;
    background-color: rgba(11, 58, 68, var(--bs-bg-opacity, 1)) !important;
}

.text-bg-info {
    color: #fff !important;
    background-color: rgba(26, 115, 232, var(--bs-bg-opacity, 1)) !important;
}

.text-bg-warning {
    color: #fff !important;
    background-color: rgba(251, 140, 0, var(--bs-bg-opacity, 1)) !important;
}

.text-bg-danger {
    color: #fff !important;
    background-color: rgba(244, 67, 53, var(--bs-bg-opacity, 1)) !important;
}

.text-bg-light {
    color: #000 !important;
    background-color: rgba(240, 242, 245, var(--bs-bg-opacity, 1)) !important;
}

.text-bg-dark {
    color: #fff !important;
    background-color: rgba(52, 71, 103, var(--bs-bg-opacity, 1)) !important;
}

.text-bg-white {
    color: #000 !important;
    background-color: rgba(255, 255, 255, var(--bs-bg-opacity, 1)) !important;
}

.text-bg-dark-blue {
    color: #fff !important;
    background-color: rgba(26, 35, 126, var(--bs-bg-opacity, 1)) !important;
}

/* Updated Link Classes with Branding Colors */
.link-primary {
    color: #ea3000 !important;
}

.link-primary:hover,
.link-primary:focus {
    color: #cc2600 !important;
}

.link-secondary {
    color: #03bbbb !important;
}

.link-secondary:hover,
.link-secondary:focus {
    color: #029999 !important;
}

.link-success {
    color: #0b3a44 !important;
}

.link-success:hover,
.link-success:focus {
    color: #092e34 !important;
}

.link-info {
    color: #1A73E8 !important;
}

.link-info:hover,
.link-info:focus {
    color: #155cba !important;
}

.link-warning {
    color: #fb8c00 !important;
}

.link-warning:hover,
.link-warning:focus {
    color: #d67900 !important;
}

.link-danger {
    color: #f44335 !important;
}

.link-danger:hover,
.link-danger:focus {
    color: #d73b2e !important;
}

.link-light {
    color: #f0f2f5 !important;
}

.link-light:hover,
.link-light:focus {
    color: #d4d6da !important;
}

.link-dark {
    color: #344767 !important;
}

.link-dark:hover,
.link-dark:focus {
    color: #2a3952 !important;
}

.link-white {
    color: #fff !important;
}

.link-white:hover,
.link-white:focus {
    color: #e0e0e0 !important;
}

.link-dark-blue {
    color: #1A237E !important;
}

.link-dark-blue:hover,
.link-dark-blue:focus {
    color: #151c65 !important;
}
/* Updated Background Classes with Branding Colors */
.bg-primary {
    background-color: #ea3000 !important;
}

.bg-secondary {
    background-color: #03bbbb !important;
}

.bg-secondary-gradient {
  background: linear-gradient(135deg, #03bbbb, #017c79) !important;
}

.bg-success {
    background-color: #0b3a44 !important;
}

.bg-info {
    background-color: #1A73E8 !important;
}

.bg-warning {
    background-color: #fb8c00 !important;
}

.bg-danger {
    background-color: #F44335 !important;
}

.bg-light {
    background-color: #f0f2f5 !important;
}

.bg-dark {
    background-color: #0b3a44 !important;
}

.bg-white {
    background-color: #fff !important;
}

.bg-dark-blue {
    background-color: #1A237E !important;
}

.bg-body {
    background-color: #fff !important;
}

.bg-transparent {
    background-color: transparent !important;
}

/* Gray Shades */
.bg-gray-100 {
    background-color: #f8f9fa !important;
}

.bg-gray-200 {
    background-color: #f0f2f5 !important;
}

.bg-gray-300 {
    background-color: #dee2e6 !important;
}

.bg-gray-400 {
    background-color: #ced4da !important;
}

.bg-gray-500 {
    background-color: #adb5bd !important;
}

.bg-gray-600 {
    background-color: #6c757d !important;
}

.bg-gray-700 {
    background-color: #495057 !important;
}

.bg-gray-800 {
    background-color: #343a40 !important;
}

.bg-gray-900 {
    background-color: #212529 !important;
}

.btn {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 0.75rem;
    --bs-btn-font-weight: 700;
    --bs-btn-line-height: 1.667;
    --bs-btn-color: #7b809a;
    --bs-btn-bg: transparent;
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: 0.5rem;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: 0 4px 7px -1px rgba(0, 0, 0, 0.11), 0 2px 4px -1px rgba(0, 0, 0, 0.07);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: all 0.15s ease-in;
  }
/* Primary Button */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #ea3000;
    --bs-btn-border-color: #ea3000;
    --bs-btn-hover-color: #ea3000;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: #e03000;
    --bs-btn-focus-shadow-rgb: 234, 48, 0;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e84000;
    --bs-btn-active-border-color: #e03000;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ea3000;
    --bs-btn-disabled-border-color: #ea3000;
  }
  
  /* Secondary Button */
  .btn-secondary {
    --bs-btn-color: #000;
    --bs-btn-bg: #03bbbb;
    --bs-btn-border-color: #03bbbb;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #02a9a9;
    --bs-btn-hover-border-color: #029e9e;
    --bs-btn-focus-shadow-rgb: 3, 187, 187;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #02a9a9;
    --bs-btn-active-border-color: #029e9e;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #03bbbb;
    --bs-btn-disabled-border-color: #03bbbb;
  }
  
  /* Success Button */
  .btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0b3a44;
    --bs-btn-border-color: #0b3a44;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #094037;
    --bs-btn-hover-border-color: #093634;
    --bs-btn-focus-shadow-rgb: 11, 58, 68;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #094037;
    --bs-btn-active-border-color: #093634;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #0b3a44;
    --bs-btn-disabled-border-color: #0b3a44;
  }
  
  /* Info Button */
  .btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #03bbbb;
    --bs-btn-border-color: #03bbbb;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #02a9a9;
    --bs-btn-hover-border-color: #029e9e;
    --bs-btn-focus-shadow-rgb: 3, 187, 187;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #02a9a9;
    --bs-btn-active-border-color: #029e9e;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #03bbbb;
    --bs-btn-disabled-border-color: #03bbbb;
  }
  
  /* Warning Button */
  .btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: #ea3000;
    --bs-btn-border-color: #ea3000;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #e54000;
    --bs-btn-hover-border-color: #e03000;
    --bs-btn-focus-shadow-rgb: 234, 48, 0;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #e84000;
    --bs-btn-active-border-color: #e03000;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ea3000;
    --bs-btn-disabled-border-color: #ea3000;
  }
  
  /* Danger Button */
  .btn-danger {
    --bs-btn-color: #000;
    --bs-btn-bg: #ea3000;
    --bs-btn-border-color: #ea3000;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #e54000;
    --bs-btn-hover-border-color: #e03000;
    --bs-btn-focus-shadow-rgb: 234, 48, 0;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #e84000;
    --bs-btn-active-border-color: #e03000;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ea3000;
    --bs-btn-disabled-border-color: #ea3000;
  }
  .btn-white {
    --bs-btn-color: #000; /* Text color */
    --bs-btn-bg: #fff; /* Background color */
    --bs-btn-border-color: #ea3000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #e54000;
    --bs-btn-hover-border-color: #e03000;
    --bs-btn-focus-shadow-rgb: 234, 48, 0;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e84000;
    --bs-btn-active-border-color: #e03000;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ea3000;
    --bs-btn-disabled-border-color: #ea3000;
  }
  
  
  /* Light Button */
  .btn-light {
    --bs-btn-color: #000;
    --bs-btn-bg: #03bbbb;
    --bs-btn-border-color: #03bbbb;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #02a9a9;
    --bs-btn-hover-border-color: #029e9e;
    --bs-btn-focus-shadow-rgb: 3, 187, 187;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #02a9a9;
    --bs-btn-active-border-color: #029e9e;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #03bbbb;
    --bs-btn-disabled-border-color: #03bbbb;
  }
  
  /* Dark Button */
  .btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0b3a44;
    --bs-btn-border-color: #0b3a44;
    --bs-btn-hover-color: #0b3a44;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: #092f2d;
    --bs-btn-focus-shadow-rgb: 11, 58, 68;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #093634;
    --bs-btn-active-border-color: #092f2d;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0b3a44;
    --bs-btn-disabled-border-color: #0b3a44;
  }
  .btn-transparent {
    --bs-btn-color: #03bbbb; /* Text color */
    --bs-btn-bg: transparent; /* Background color */
    --bs-btn-border-color: #03bbbb; /* Border color */
    --bs-btn-hover-color: #fff; /* Text color on hover */
    --bs-btn-hover-bg: #029e9e; /* Background color on hover */
    --bs-btn-hover-border-color: #029e9e; /* Border color on hover */
    --bs-btn-focus-shadow-rgb: 3, 187, 187; /* Focus shadow color */
    --bs-btn-active-color: #fff; /* Text color when active */
    --bs-btn-active-bg: #028c8c; /* Background color when active */
    --bs-btn-active-border-color: #028c8c; /* Border color when active */
    --bs-btn-active-shadow: none; /* Shadow when active */
    --bs-btn-disabled-color: #6c757d; /* Text color when disabled */
    --bs-btn-disabled-bg: transparent; /* Background color when disabled */
    --bs-btn-disabled-border-color: #d6d6d6; /* Border color when disabled */
  }
  
  /* Primary Button */
.btn-primary,
.btn.bg-gradient-primary {
  box-shadow: 0 3px 3px 0 rgba(233, 30, 99, 0.15), 0 3px 1px -2px rgba(233, 30, 99, 0.2), 0 1px 5px 0 rgba(233, 30, 99, 0.15);
}

.btn-primary:hover,
.btn.bg-gradient-primary:hover {
  background-color: #e91e63;
  border-color: #e91e63;
  box-shadow: 0 14px 26px -12px rgba(233, 30, 99, 0.4), 0 4px 23px 0 rgba(233, 30, 99, 0.15), 0 8px 10px -5px rgba(233, 30, 99, 0.2);
}

.btn-primary .btn.bg-outline-primary,
.btn.bg-gradient-primary .btn.bg-outline-primary {
  border: 1px solid #e91e63;
}

/* Secondary Button */
.btn-secondary,
.btn.bg-gradient-secondary {
  box-shadow: 0 3px 3px 0 rgba(123, 128, 154, 0.15), 0 3px 1px -2px rgba(123, 128, 154, 0.2), 0 1px 5px 0 rgba(123, 128, 154, 0.15);
}

.btn-secondary:hover,
.btn.bg-gradient-secondary:hover {
  background-color: #7b809a;
  border-color: #7b809a;
  box-shadow: 0 14px 26px -12px rgba(123, 128, 154, 0.4), 0 4px 23px 0 rgba(123, 128, 154, 0.15), 0 8px 10px -5px rgba(123, 128, 154, 0.2);
}

.btn-secondary .btn.bg-outline-secondary,
.btn.bg-gradient-secondary .btn.bg-outline-secondary {
  border: 1px solid #7b809a;
}

/* Success Button */
.btn-success,
.btn.bg-gradient-success {
  box-shadow: 0 3px 3px 0 rgba(76, 175, 80, 0.15), 0 3px 1px -2px rgba(76, 175, 80, 0.2), 0 1px 5px 0 rgba(76, 175, 80, 0.15);
}

.btn-success:hover,
.btn.bg-gradient-success:hover {
  background-color: #4CAF50;
  border-color: #4CAF50;
  box-shadow: 0 14px 26px -12px rgba(76, 175, 80, 0.4), 0 4px 23px 0 rgba(76, 175, 80, 0.15), 0 8px 10px -5px rgba(76, 175, 80, 0.2);
}

.btn-success .btn.bg-outline-success,
.btn.bg-gradient-success .btn.bg-outline-success {
  border: 1px solid #4CAF50;
}

/* Info Button */
.btn-info,
.btn.bg-gradient-info {
  box-shadow: 0 3px 3px 0 rgba(26, 115, 232, 0.15), 0 3px 1px -2px rgba(26, 115, 232, 0.2), 0 1px 5px 0 rgba(26, 115, 232, 0.15);
}

.btn-info:hover,
.btn.bg-gradient-info:hover {
  background-color: #1A73E8;
  border-color: #1A73E8;
  box-shadow: 0 14px 26px -12px rgba(26, 115, 232, 0.4), 0 4px 23px 0 rgba(26, 115, 232, 0.15), 0 8px 10px -5px rgba(26, 115, 232, 0.2);
}

.btn-info .btn.bg-outline-info,
.btn.bg-gradient-info .btn.bg-outline-info {
  border: 1px solid #1A73E8;
}

/* Warning Button */
.btn-warning,
.btn.bg-gradient-warning {
  box-shadow: 0 3px 3px 0 rgba(251, 140, 0, 0.15), 0 3px 1px -2px rgba(251, 140, 0, 0.2), 0 1px 5px 0 rgba(251, 140, 0, 0.15);
}

.btn-warning:hover,
.btn.bg-gradient-warning:hover {
  background-color: #fb8c00;
  border-color: #fb8c00;
  box-shadow: 0 14px 26px -12px rgba(251, 140, 0, 0.4), 0 4px 23px 0 rgba(251, 140, 0, 0.15), 0 8px 10px -5px rgba(251, 140, 0, 0.2);
}

.btn-warning .btn.bg-outline-warning,
.btn.bg-gradient-warning .btn.bg-outline-warning {
  border: 1px solid #fb8c00;
}

/* Danger Button */
.btn-danger,
.btn.bg-gradient-danger {
  box-shadow: 0 3px 3px 0 rgba(244, 67, 53, 0.15), 0 3px 1px -2px rgba(244, 67, 53, 0.2), 0 1px 5px 0 rgba(244, 67, 53, 0.15);
}

.btn-danger:hover,
.btn.bg-gradient-danger:hover {
  background-color: #F44335;
  border-color: #F44335;
  box-shadow: 0 14px 26px -12px rgba(244, 67, 53, 0.4), 0 4px 23px 0 rgba(244, 67, 53, 0.15), 0 8px 10px -5px rgba(244, 67, 53, 0.2);
}

.btn-danger .btn.bg-outline-danger,
.btn.bg-gradient-danger .btn.bg-outline-danger {
  border: 1px solid #F44335;
}

.text-primary {
    color: #ea3000 !important; /* Branding red */
  }
  
  .text-secondary {
    color: #03bbbb !important; /* Branding teal */
  }
  
  .text-success {
    color: #4CAF50 !important; /* Green for success */
  }
  
  .text-info {
    color: #03bbbb !important; /* Branding dark blue */
  }
  
  .text-warning {
    color: #fb8c00 !important; /* Orange for warning */
  }
  
  .text-danger {
    color: #F44335 !important; /* Red for danger */
  }
  
  .text-light {
    color: #f0f2f5 !important; /* Light gray */
  }
  
  .text-dark {
    color: #0b3a44 !important; /* Branding dark blue */
  }
  
  .text-white {
    color: #fff !important; /* White */
  }
  
  .text-dark-blue {
    color: #0b3a44 !important; /* Branding dark blue */
  }
  
  .text-body {
    color: #03bbbb !important; /* Branding teal */
  }
  
  .text-rose {
    color: #ea3000 !important; /* Branding red */
  }
  
  .text-muted {
    color: #6c757d !important; /* Muted gray */
  }
  
  .text-black-50 {
    color: rgba(0, 0, 0, 0.5) !important; /* Black with 50% opacity */
  }
  
  .text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important; /* White with 50% opacity */
  }
  .text-gradient.text-primary {
    background-image: linear-gradient(195deg, #ea3000, #b30000); /* Branding red gradient */
  }
  
  .text-gradient.text-info {
    background-image: linear-gradient(135deg, #03bbbb 0%, #02999e 100%);

  }
  
  .text-gradient.text-success {
    background-image: linear-gradient(195deg, #66BB6A, #4CAF50); /* Green gradient for success */
  }
  
  .text-gradient.text-warning {
    background-image: linear-gradient(195deg, #fb8c00, #f57c00); /* Orange gradient for warning */
  }
  
  .text-gradient.text-danger {
    background-image: linear-gradient(195deg, #F44335, #d32f2f); /* Red gradient for danger */
  }
  
  .text-gradient.text-dark {
    background-image: linear-gradient(195deg, #0b3a44, #002f3c); /* Branding dark blue gradient */
  }
  
  .card.card-background.card-background-mask-primary:before {
    background: rgba(0, 0, 0, 0.3); /* Darker overlay for better contrast */
  }
  
  .card.card-background.card-background-mask-primary:after {
    background-image: linear-gradient(135deg, #ea3000 0%, #c62828 100%); /* Primary gradient */
    opacity: 0.85; /* Slightly transparent for a smooth effect */
  }
  
  .card.card-background.card-background-mask-secondary:before {
    background: rgba(0, 0, 0, 0.3); /* Darker overlay for better contrast */
  }
  
  .card.card-background.card-background-mask-secondary:after {
    background-image: linear-gradient(135deg, #0b3a44 0%, #0d3c40 100%); /* Secondary gradient */
    opacity: 0.85; /* Slightly transparent for a smooth effect */
  }
  
  .card.card-background.card-background-mask-success:before {
    background: rgba(0, 0, 0, 0.3); /* Darker overlay for better contrast */
  }
  
  .card.card-background.card-background-mask-success:after {
    background-image: linear-gradient(135deg, #66BB6A 0%, #43A047 100%); /* Success gradient */
    opacity: 0.85; /* Slightly transparent for a smooth effect */
  }
  
  .card.card-background.card-background-mask-info:before {
    background: rgba(0, 0, 0, 0.3); /* Darker overlay for better contrast */
  }
  
  .card.card-background.card-background-mask-info:after {
    background-image: linear-gradient(135deg, #03bbbb 0%, #02999e 100%); /* Info gradient */
    opacity: 0.85; /* Slightly transparent for a smooth effect */
  }
  
  .card.card-background.card-background-mask-warning:before {
    background: rgba(0, 0, 0, 0.3); /* Darker overlay for better contrast */
  }
  
  .card.card-background.card-background-mask-warning:after {
    background-image: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%); /* Warning gradient */
    opacity: 0.85; /* Slightly transparent for a smooth effect */
  }
  
  .card.card-background.card-background-mask-danger:before {
    background: rgba(0, 0, 0, 0.3); /* Darker overlay for better contrast */
  }
  
  .card.card-background.card-background-mask-danger:after {
    background-image: linear-gradient(135deg, #ea3000 0%, #c62828 100%); /* Danger gradient */
    opacity: 0.85; /* Slightly transparent for a smooth effect */
  }
  
  .card.card-background.card-background-mask-light:before {
    background: rgba(0, 0, 0, 0.3); /* Darker overlay for better contrast */
  }
  
  .card.card-background.card-background-mask-light:after {
    background-image: linear-gradient(135deg, #EBEFF4 0%, #CED4DA 100%); /* Light gradient */
    opacity: 0.85; /* Slightly transparent for a smooth effect */
  }
  
  .card.card-background.card-background-mask-dark:before {
    background: rgba(0, 0, 0, 0.3); /* Darker overlay for better contrast */
  }
  
  .card.card-background.card-background-mask-dark:after {
    background-image: linear-gradient(135deg, #0b3a44 0%, #0d3c40 100%); /* Dark gradient */
    opacity: 0.85; /* Slightly transparent for a smooth effect */
  }
  
.icon-gradient-info {
background-image: linear-gradient(135deg, #03bbbb 0%, #02999e 100%);
-webkit-background-clip: text;
color: transparent;
}

.carousel-item img {
  width: 100%; /* Make the image fill the width of the carousel container */
  height: 500px; /* Set a fixed height for the images */
  object-fit: scale-down; /* Ensure the image covers the area without distortion */
}

.carousel-caption-container {
  text-align: center;
  padding: 10px;
  background: #ea3000; /* Background color for the caption container */
  color: #fff; /* Text color */
  border-top: 1px solid #ddd; /* Optional border for separation */
}

.carousel-caption-container h5 {
  margin: 0;
  font-size: 1.25rem; /* Adjust font size as needed */
}

.carousel-caption-container p {
  margin: 0;
  font-size: 1rem; /* Adjust font size as needed */
}

.carousel-control-prev, .carousel-control-next {
  width: 5%; /* Adjust width as needed */
  color: #fff; /* Icon color */
}

.carousel-control-prev-icon, .carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5); /* Optional background for visibility */
}

@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.section-title {
  animation: fadeInUp 1s ease-in-out;
}



.frame {
  padding: 10px;
  position: relative;
}


.page-header {
  z-index: -20;
}
.previewItem {
  padding-top: 1%;
  border-radius: 14px;
  margin: 10px;
}

/* Content container styles */
.content-container {
  overflow-y: auto;
}
/* Custom Card Styles */
.background-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 10px;
  padding: 10px;
  cursor: pointer;
  transition: transform 0.2s ease;
  background-color: white;
  z-index: -15;
  height: auto;
  position: absolute;
  
}

/* Loading indicator styles */
.loading-indicator {
  display: none;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  color: #888;
}

/* Fade-in animation */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}