/* preloader start */
/* Designed and developed by AK7 */
:root {
    --preloader-size: 120px;
    --ring-thickness: 4px;
    --speed: 1.6s;
    --ring-color: #007bff; /* Single color */
    --bg-light: #ffffff;
    --bg-dark: #0b0f17;
  }

  .preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--bg-light);
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  @media (prefers-color-scheme: dark) {
    .preloader { background: var(--bg-dark); }
  }

  .preloader[hidden] {
    opacity: 0;
    visibility: hidden;
  }

  .preloader__content {
    position: relative;
    width: var(--preloader-size);
    height: var(--preloader-size);
    display: grid;
    place-items: center;
  }

/* Full visible circular ring animation (improved) */
.preloader__ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: var(--ring-thickness) solid transparent;
  border-top-color: var(--ring-color); /* visible top segment */
  border-right-color: var(--ring-color); /* adds fuller arc look */
  animation: spin var(--speed) linear infinite;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.4);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


  .preloader__logo {
    position: absolute;
    width: 45%;
    object-fit: contain;
    animation: pulse 2s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
  }

  @media (prefers-reduced-motion: reduce) {
    .preloader, .preloader * { animation: none !important; }
  }
  .preloader {
  opacity: 1;
  transition: opacity 0.5s ease;
}


/* preloader end */



/* Kill the vertical surplus only for the About section above the footer */
#about-sec.space { 
  padding-bottom: 0 !important;  /* neutralize the utility’s bottom padding */
}

/* If the template adds a bottom gap via a helper class */
#about-sec .space-bottom { 
  margin-bottom: 0 !important; 
}

/* Some themes render decorative shapes via pseudo-elements on .space */
#about-sec.space::after,
#about-sec.space::before {
  content: none !important;
  display: none !important;
}

/* Safety: normalize last-block spacing inside about section */
#about-sec .title-area:last-child,
#about-sec .about-item-wrap:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure footer doesn’t reintroduce separation */
#about-sec + .footer-wrapper {
  margin-top: 0 !important;
}







/* ===== Bootstrap modal hardening + professional skin (Softzane) ===== */

/* 1) Unambiguous stacking order */
:root{
  --sz-modal-z: 100010;     /* modal above everything */
  --sz-backdrop-z: 100000;  /* backdrop just under modal */
  --sz-overlay-z: 99990;    /* push all theme overlays under backdrop */
}

/* Backdrop must sit BELOW modal (never above) */
.modal-backdrop{
  position: fixed !important;
  z-index: var(--sz-backdrop-z) !important;
  background: rgba(9,14,28,0.65) !important;    /* softer dim */
  backdrop-filter: blur(6px);                    /* blur the PAGE, not the modal */
}

/* Modal itself must be the topmost thing */
.modal{
  position: fixed !important;
  z-index: var(--sz-modal-z) !important;
}
.modal .modal-dialog{
  position: relative;
  z-index: calc(var(--sz-modal-z) + 1) !important;
  pointer-events: auto;      /* ensure clicks are accepted */
}
.modal .modal-content{
  position: relative;
  z-index: calc(var(--sz-modal-z) + 2) !important;
}

/* 2) De-fang all other overlays while a modal is open
      (some of these sit at z-index 99999/999999 in style.css) */
.modal-open .sidemenu-wrapper,
.modal-open .popup-search-box,
.modal-open .th-menu-wrapper,
.modal-open .mfp-bg,
.modal-open .mfp-wrap,
.modal-open .color-scheme-wrap,
.modal-open #preloader{
  display: none !important;      /* simple & reliable */
}

/* 3) Defensive: ensure none of the above can overtake the backdrop */
.sidemenu-wrapper,
.popup-search-box,
.th-menu-wrapper,
.mfp-bg,
.mfp-wrap,
#preloader,
.color-scheme-wrap{
  z-index: var(--sz-overlay-z) !important;
}

/* 4) Professional look for your feedback modal */
#feedbackModal .modal-content{
  border: 0;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(2,6,23,.28);
}
#feedbackModal .modal-header{
  padding: 18px 22px;
  background: linear-gradient(180deg, rgba(34,197,94,.10), rgba(34,197,94,0));
}
#feedbackModal .modal-title{
  font-weight: 700;
  letter-spacing:.2px;
}
#feedbackModal .modal-body{
  font-size: 15px;
  color: #3b4256;
}
#feedbackModal .modal-footer{
  padding: 0 22px 20px;
}
#feedbackModal .btn{
  border-radius: 10px;
  padding: 10px 16px;
}
#feedbackHeader.success #feedbackIcon svg{ width:26px; height:26px; }
#feedbackHeader.error   { background: linear-gradient(180deg, rgba(220,38,38,.10), rgba(220,38,38,0)); }
#feedbackHeader.error #feedbackIcon{ background:#fff0f0 !important; }

/* 5) Accessibility/pointer-events belt-and-suspenders */
#feedbackModal, #feedbackModal *{
  pointer-events: auto !important;
}








/* ================================
   Softzane – Center Badge Modal
   ================================ */
#feedbackModal .modal-content {
  position: relative;
  background: #fff;
  border-radius: 28px; /* strong curved square */
  box-shadow: 0 24px 48px rgba(22, 163, 74, 0.15);
  border: 1.5px solid rgba(22, 163, 74, 0.3);
  padding-top: 72px; /* space for circle badge inside */
  max-width: 520px;
  margin: 8vh auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: modalEntrance 0.3s cubic-bezier(.2, .7, .25, 1);
}

/* Circle badge fully inside modal */
#feedbackIcon {
  position: absolute;
  top: 24px; /* inside top edge */
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 96px;
  background: #fff;
  border: 6px solid rgba(22, 163, 74, 0.3);
  border-radius: 50%;
  box-shadow:
    0 16px 48px rgba(22, 163, 74, 0.2),
    0 0 0 8px rgba(22, 163, 74, 0.1);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* SVG tick icon styling and animation */
#feedbackIcon svg {
  width: 48px;
  height: 48px;
  stroke: #16A34A;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: szCheck 0.5s ease 0.15s forwards;
}

@keyframes szCheck {
  to {
    stroke-dashoffset: 0;
  }
}

/* Modal header alignment */
#feedbackHeader {
  margin-top: 8px;
  padding: 0 20px;
}

/* Modal body styling */
#feedbackModal .modal-body {
  font-size: 1rem;
  color: #475569;
  line-height: 1.6;
  padding: 0 24px 0;
  width: 100%;
}

/* Centered footer with styled close button */
.modal-footer {
  padding: 16px 0 24px;
  width: 100%;
  display: flex;
  justify-content: center;
  border-top: none;
}

.modal-footer .btn {
  border-radius: 12px;
  font-weight: 600;
  padding: 10px 30px;
  border: 1.8px solid #16A34A;
  color: #16A34A;
  background-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.modal-footer .btn:hover {
  background-color: #16A34A;
  color: #fff;
}

/* Modal entrance animation */
@keyframes modalEntrance {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}


/* ===== Force the About image to be fluid, regardless of theme rules ===== */

/* Scope to the About section container you actually have: .about-area.smoke-bg */
.about-area.smoke-bg .img-box6,
.about-area.smoke-bg .img-box6 .img1 {
  min-width: 0 !important;      /* kill any 665/680px min-width */
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  flex: 1 1 auto !important;     /* allow shrink if parent is flex */
}

/* Make the bitmap fluid */
.about-area.smoke-bg .img-box6 .img1 img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: inherit;
  object-fit: cover;             /* use 'contain' if you prefer no crop */
}

/* Kill any stubborn caps the theme might set at certain breakpoints */
.about-area.smoke-bg .img-box6 { max-width: none !important; }
.about-area.smoke-bg .img-box6 .img1 { max-width: none !important; }

/* If your grid columns are Flex items, allow shrinking */
.about-area.smoke-bg [class*="col-"] { min-width: 0 !important; }

/* Optional: if the theme sets a fixed height anywhere, neutralize it */
.about-area.smoke-bg .img-box6,
.about-area.smoke-bg .img-box6 .img1,
.about-area.smoke-bg .img-box6 .img1 img {
  max-height: none !important;
}
/* Curved corners for About image */
.about-area.smoke-bg .img-box6 .img1 {
  overflow: hidden;             /* clip the image to the curve */
  border-radius: 25px;          /* adjust radius as you like */
}

.about-area.smoke-bg .img-box6 .img1 img {
  border-radius: inherit;       /* match the wrapper’s curve */
  display: block;               /* removes tiny gaps on some browsers */
}
