/* Optionally remove the default toggle behavior */
/* .nav-dropdown-toggle::after {
    display: none;
  } */
/* HTML: <div class="loader" ========================================LOADRES></div> */
.dot-loader {
  width: 30px;
  aspect-ratio: 1;
  display:grid;
  -webkit-mask: conic-gradient(from 15deg,#0000,#000);
  animation: l26 1s infinite steps(12);
}
.dot-loader,
.dot-loader:before,
.dot-loader:after{
  background:
    radial-gradient(closest-side at 50% 12.5%,
     #041e49c7 96%,#0000) 50% 0/20% 80% repeat-y,
    radial-gradient(closest-side at 12.5% 50%,
     #041e49c7 96%,#0000) 0 50%/80% 20% repeat-x;
}
.dot-loader:before,
.dot-loader:after {
  content: "";
  grid-area: 1/1;
  transform: rotate(30deg);
}
.dot-loader:after {
  transform: rotate(60deg);
}

@keyframes l26 {
  100% {transform:rotate(1turn)}
}

/* HTML: <div class="loader" ========================================LOADRES></div> */

.gray-card {
  background-color: #F0F0F0;
}

html,
body {
  overflow: auto;
  /* or scroll */
}

#top-dropdown-menu {
  width: 100vw;
  height: 25rem;
  /* height: 100vw; */
}

#my-offcanvas {
  width: 100vw;
}

#my-offcanvas {
  background-color: rgba(255, 255, 255, 0.3);
  /* Increase transparency */
  backdrop-filter: blur(8px);
  /* Adjust the blur intensity as needed */
  -webkit-backdrop-filter: blur(8px);
  /* For Safari */
  border: none;
  /* Optional: Remove border for a seamless look */
  box-shadow: none;
  /* Optional: Remove shadow for a cleaner look */
}

.transparent-bg {
  background-color: rgba(255, 255, 255, 0) !important;
  /* Increase transparency */
  backdrop-filter: blur(8px) !important;
  /* Adjust the blur intensity as needed */
  -webkit-backdrop-filter: blur(8px) !important;
  /* For Safari */
  border: none !important;
  /* Optional: Remove border for a seamless look */
  box-shadow: none !important;
  /* Optional: Remove shadow for a cleaner look */
  color: #041E49 !important;
}

.transparent-bg button {
  border: none !important; /* Specifically target button elements */
  box-shadow: none !important; /* Also clear shadows on buttons */
  outline: none !important; /* Remove outline for Chrome/Edge focus state */
}


/* Hide the default caret toggle icon */
.rem-accordion-btn-caret::after {
  display: none !important;  /* Hides the default toggle indicator */
}

/* Make accordion button transparent and remove hover/focus effects */
.my-accordion-button {
  background-color: rgba(255, 255, 255, 0.3) !important;
  /* Increase transparency */
  backdrop-filter: blur(8px) !important;
  /* Adjust the blur intensity as needed */
  -webkit-backdrop-filter: blur(8px) !important;
  /* For Safari */
  border: none;
  /* Optional: Remove border for a seamless look */
  box-shadow: none;
  /* Optional: Remove shadow for a cleaner look */
}

.my-accordion-button:focus,
.my-accordion-button:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
  /* Increase transparency */
  backdrop-filter: blur(8px) !important;
  /* Adjust the blur intensity as needed */
  -webkit-backdrop-filter: blur(8px) !important;
  /* For Safari */
  border: none;
  /* Optional: Remove border for a seamless look */
  box-shadow: none;
  /* Optional: Remove shadow for a cleaner look */
}

/* Make the accordion body transparent */
.my-accordion-body {
  background-color: rgba(255, 255, 255, 0.3) !important;
  /* Increase transparency */
  backdrop-filter: blur(8px) !important;
  /* Adjust the blur intensity as needed */
  -webkit-backdrop-filter: blur(8px) !important;
  /* For Safari */
  border: none;
  /* Optional: Remove border for a seamless look */
  box-shadow: none;
  /* Optional: Remove shadow for a cleaner look */
}

/* Additional styling for the accordion to remove borders */
.my-accordion-item {
  border: none;
}



#nav-container {
  background-color: rgba(255, 255, 255, 0.3) !important;
  /* Increase transparency */
  backdrop-filter: blur(8px) !important;
  /* Adjust the blur intensity as needed */
  -webkit-backdrop-filter: blur(8px) !important;
  /* For Safari */
  border: none;
  /* Optional: Remove border for a seamless look */
  box-shadow: none;
  /* Optional: Remove shadow for a cleaner look */
}


.offcanvas-end {
  transform: none !important;
  /* Prevents the slide-in effect */
}

.offcanvas {
  transition: none !important;
  /* Disables the transition animation */
}

body {
  background-color: #FAFBFF;
}

#my-offcanvas-header {
  background-color: #fafbff60 !important;
  /* Increase transparency */
  ;
}

.nav-font-size {
  font-size: 14px;
}

.text-blue-light {
  color: #041E49 !important;
}

.text-blue-light:focus {
  color: #041E49 !important;
}

.text-blue-light:hover {
  color: #041E49 !important;
}

.text-blue-light-hover:hover {
  color: #041e49c7 !important;
}

.menu-btn-hover:hover {
  background-color: #ececec;
  color: #000;
  border-radius: 10px;
}

.reg-btn-pg {
  background-color: #041E49;
  color: #fff;
}

.reg-btn-pg:focus {
  background-color: #041E49 !important;
  color: #fff;
}

.reg-btn-pg:active {
  background-color: #041E49 !important;
  color: #fff;
}

.reg-btn-pg:hover {
  background-color: #041e49c2;
  color: #fff;
}

.pbg {
  background-color: #A8C7FA;
}

.sidebar-items-hover:hover {
  background-color: #D3E4FF;
  color: #475B7E;
}

.side-bar-bg-color {
  /* background-color: #e2eaf7;  */
  background-color: #F7F9FC;

}


.pbg-active:active {
  background-color: #A8C7FA;
}

.pbg-active:focus {
  background-color: #A8C7FA;
}

.pbg-hover:hover {
  background-color: #A8C7FA !important;
  color: #041E49 !important;
}

.my_sec_primary_txt_color {
  color: #007bff;
}

.small-text {
  font-size: 12px !important;
}

.small2-text {
  font-size: 15px !important;
}

.blue-bg {
  background-color: #E3ECFA !important;
}

.vertically-aligned {
  vertical-align: middle;
  line-height: 1;
}

.blue-bg-hover:hover {
  background-color: #E3ECFA;
}

.blue-text {
  color: #475B7E !important;
}

.content-body {
  background-color: #FAFBFF;
}

/* #nav-container{
    background-color: #FAFBFF !important;
} */

.primary-btn {
  background-color: #80C2FF;
}

/* Make the dropdown menu more transparent and keep the background blurred */
#top-dropdown-menu {
  background-color: rgba(255, 255, 255, 0.3);
  /* Increase transparency */
  backdrop-filter: blur(8px);
  /* Adjust the blur intensity as needed */
  -webkit-backdrop-filter: blur(8px);
  /* For Safari */
  border: none;
  /* Optional: Remove border for a seamless look */
  box-shadow: none;
  /* Optional: Remove shadow for a cleaner look */
}

/* Heroo images =========================================== */
.card-img-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.card-img-top {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease;
  /* Smooth zoom transition */
  border-radius: 10px;
}

.card-img-container:hover .card-img-top {
  transform: scale(1.1);
  /* Zoom-in effect */
}

.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 15px;
  text-align: left;
}

.card-overlay p {
  margin: 0;
  font-size: 14px;
}

.card-overlay h3 {
  margin: 5px 0 0;
  font-size: 18px;
}


#footer-line {
  border-top: 1px solid #041E49;
}

/* Heroo images =========================================== */

/* HTML: <div class="loader"></div> */
.new-update-loader1 {
  width: fit-content;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 30px;
  padding-bottom: 8px;
  background: linear-gradient(currentColor 0 0) 0 100%/0% 3px no-repeat;
  animation: l2 2s linear infinite;
  background-color: #7d0552 !important;
}

@keyframes l2 {to{background-size: 100% 3px}}

/* HTML: <div class="loader"></div> */
.new-update-loader2 {
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  background: radial-gradient(circle closest-side,#FFC550 94%,#0000) right/calc(200% - 1em) 100%;
  animation: l24 1s infinite alternate linear;
}
.new-update-loader2::before {
  line-height: 1em;
  color: #FFC550;
  background: inherit;
  background-image: radial-gradient(circle closest-side,#fff 94%,#000);
  -webkit-background-clip:text;
          background-clip:text;
}

@keyframes l24{
  100%{background-position: left}
}

.new-update-loader3 {
  width: fit-content;
  font-weight: bold;
  background: radial-gradient(circle closest-side,#c08911 94%,#0000) right/calc(200% - 1em) 100%;
  animation: l24 1s infinite alternate linear;
}
.new-update-loader3::before {
  line-height: 1em;
  background: inherit;
  background-image: radial-gradient(circle closest-side,#08204C 94%,#000);
  -webkit-background-clip:text;
          background-clip:text;
}

@keyframes l24{
  100%{background-position: left}
}


.gradient-heading {
  font-size: 1.5rem; /* Matching fs-6 size */
  background: linear-gradient(135deg, #4f46e5 0%, #0C244C 50%, #7D0552 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  font-weight: 600;
  padding: 0.25rem 0;
  
  /* Optional animation */
  animation: gradientShift 6s ease infinite;
  background-size: 200% 200%;
}

/* Optional animation for gradient movement */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Optional hover effect */
.gradient-heading:hover {
  transform: scale(1.02);
  text-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

  @media (min-width: 576px) {
    .my-modal-md {
      max-width: 900px; /* Adjust this value as needed */
    }
  }