/* ===== Fullscreen Preloader Background ===== */
#global-preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	transition: opacity 0.5s ease;
  }
  
  #global-preloader.hide {
	opacity: 0;
	pointer-events: none;
	display: none !important;
  }
  
  /* ===== Preloader SVG Wrapper ===== */
  #loaderSvgWrapper {
	position: fixed;
	inset: 0;
	z-index: 99;
  }
  
  /* Centered Loader (SVG or logo) */
  #preLoader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  }
  
  /* Image Wrapper */
  .Image {
	position: relative;
	width: 80%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px;
	transform: translate(1%, -80%);
  }
  
  .Image img {
	width: 10%;
	height: auto;
	max-width: 100%;
	
  }
  
  .Image .text {
	color: white;
	padding: 8px;
	font-size: 14px;
	text-align: center;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
  }
  
  /* Responsive Image Adjustments */
  @media (max-width: 1024px) {
	.Image img {
	  width: 30%;
	}
  }
  
  @media (max-width: 768px) {
	.Image img {
	  width: 50%;
	}
  
	.Image .text {
	  font-size: 13px;
	}
  }
  
  /* ===== Centered Loading Line ===== */
  .all-loader {
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
  }
  
  .loading-line {
	display: flex;
	align-items: center;
  }
  
  .loading-text {
	color: #ffffff;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 22px;
	font-weight: 200;
	letter-spacing: 2px;
	text-transform: capitalize;
	margin-right: 10px;
  }
  
  .loading-dots {
	display: flex;
	align-items: center;
	margin-bottom: -12px;
  }
  
  .loading-dots--dot {
	animation: dot-keyframes 1.5s infinite ease-in-out;
	background-color: #ffffff;
	border-radius: 50%;
	height: 5px;
	width: 5px;
	margin: 0 3px;
  }
  
  .loading-dots--dot:nth-child(2) {
	animation-delay: 0.5s;
  }
  .loading-dots--dot:nth-child(3) {
	animation-delay: 1s;
  }
  
  @keyframes dot-keyframes {
	0%   { opacity: 0.4; transform: scale(1); }
	50%  { opacity: 1;   transform: scale(1.2); }
	100% { opacity: 0.4; transform: scale(1); }
  }
  
  /* ===== Optional SVG Animation Classes (if using) ===== */
  path {
	fill: #E30918;
	stroke: #E30918;
  }
  
  #T1 { animation: visible 2s ease 0.2s infinite; }
  #T2 { animation: visible 2s ease 0.4s infinite; }
  #T3 { animation: visible 2s ease 0.6s infinite; }
  #T4 { animation: visible 2s ease 0.8s infinite; }
  #T5 { animation: visible 2s ease 1s infinite; }
  #T6 { animation: visible 2s ease 1.2s infinite; }
  
  @keyframes visible {
	0%   { opacity: 1; stroke-opacity: 1; }
	50%  { opacity: 0; stroke-opacity: 0; }
	100% { opacity: 1; stroke-opacity: 1; }
  }
  

  @media (min-width: 600px) and (max-width: 1024px) {
	.all-loader {
	  top: 20%; /* Slightly lower for tablets */
	}
  
	.loading-text {
	  font-size: 18px; /* Slightly smaller text for tablets */
	}
  
	.loading-dots--dot {
	  height: 6px;
	  width: 6px;
	}
  }


  @media (min-width: 700px) and (max-width: 1180px) {
	#loaderSvgWrapper {
	  padding: 20px; /* Optional: Add breathing space */
	  flex-direction: column; /* Stack items vertically if needed */
	  justify-content: center;
	  align-items: center;
	}
  
	#preLoader {
	  top: 52%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  width: 60%; /* Adjust based on your SVG or image size */
	  max-width: 300px;
	}
  
	.Image img {
	  width: 20%; /* Scale image inside for tablets */
	}
  
	.Image .text {
	  font-size: 14px;
	}
	.all-loader {
      top: 60%; /* Slightly lower for tablets */
    }
  }
  

  @media (max-width: 599px) {
	#loaderSvgWrapper {
	  flex-direction: column; /* Stack content vertically if needed */
	  padding: 10px;           /* Add breathing room on small screens */
	}
  
	#preLoader {
	  top: 50%;
	  left: 48%;
	  transform: translate(-50%, -50%);
	  width: 80%;              /* Scales better on small screens */
	  max-width: 250px;
	}
  
	.Image img {
	  width: 40%;              /* Smaller image for mobile */
	}
  
	.Image .text {
	  font-size: 12px;
	  text-align: center;
	  padding: 5px 0;
	}
  
	.all-loader {
	  top: 60%;
	}
  
	.loading-text {
	  font-size: 20px;
	}
  
	.loading-dots--dot {
	  height: 4px;
	  width: 4px;
	}
  }