/*
 Theme Name: Divi Child
 Template: Divi
*/
 
/* =Theme customization starts here
------------------------------------------------------- */

/* ==========================================================================
   PRELOADER & ANIMATED TEXT STYLES
   ========================================================================== */

/* Main preloader container - WHITE BACKGROUND */
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
  overflow: hidden;
}

/* Percentage counter - CENTERED */
#percentage-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  opacity: 0; /* Start hidden, JS will fade it in */
}

#percentage {
  font-size: 16px;
  font-weight: 500;
  font-family: 'geist var', sans-serif;
  color: #141414;
  overflow: hidden;
  display: inline-block;
  line-height: 1.2;
}

/* Ensure the animated characters within the percentage start transformed */
#percentage .preloader-wrap__char {
  display: inline-block;
  overflow: hidden;
}

#percentage .preloader-wrap__char-inner {
  display: inline-block;
  transform: translateY(100%);
  color: #141414;
}

/* Styles for stagger animation */
.preloader-wrap {
  overflow: hidden;
}

.preloader-wrap * {
  pointer-events: none;
}

.preloader-wrap__word {
  display: inline-flex;
  overflow: hidden;
  white-space: normal;
}

.preloader-wrap__char {
  display: inline-block;
  position: relative;
  overflow: hidden;
  line-height: inherit;
}

.preloader-wrap__char-inner {
  display: inline-block;
  position: relative;
  transform: translateY(100%);
  color: #141414;
}

.preloader-wrap__char-inner:after {
  content: none !important;
}

/* Prevent scrolling while preloader is active */
body.noscroll {
  overflow: hidden;
}

/* Improve text rendering during transforms */
.preloader-wrap__char-inner {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  will-change: transform;
}

/* Media queries for responsive design */
@media (max-width: 767px) {
  #percentage {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  #percentage {
    font-size: 12px;
  }
}

/* ==========================================================================
   NEW TEXT ANIMATION (LEFT-ALIGNED)
   ========================================================================== */

/* New text animation class */
.new-text-animation {
  color: transparent !important; /* Hide original text to prevent FOUC for the animation */
  opacity: 0; /* Initially hide the element */
  /* The initial hiding is now handled by an inline <style> block. */
  visibility: hidden;
  display: inline-block; 
}

/* ==========================================================================
   NEW TEXT ANIMATION (CENTER-ALIGNED)
   ========================================================================== */
.new-text-animation-center {
  color: transparent !important; /* Hide original text */
  opacity: 0; /* Initially hide the element */
  /* The initial hiding is now handled by an inline <style> block. */
  visibility: hidden;
  display: block; /* Use block to take up full width */
  width: 100%; /* Ensure it spans the container width */
  text-align: center; /* Center the text */
}


/* ==========================================================================
   SHARED STYLES FOR ALL NEW TEXT ANIMATIONS
   ========================================================================== */

/* Wrapper for the new text animation words and characters */
.new-text-wrap {
  overflow: hidden; 
}
.new-text-wrap * { 
  pointer-events: none; /* Optional: if you don't want interactions during animation */
}

.new-text-wrap__word {
  display: inline-flex; 
  overflow: hidden; 
  white-space: normal; 
}

.new-text-wrap__char {
  display: inline-block;
  position: relative; 
  overflow: hidden; 
  line-height: inherit; /* Keep wrapper aligned to text line-height */
}

.new-text-wrap__char-inner {
  display: inline-block;
  position: relative;
  transform: translateY(100%); /* Start off-screen */
  color: inherit; /* Inherit color from parent (.new-text-animation or .new-text-animation-center) */
}

.new-text-wrap__char-inner:after {
  /* See note above: prevent duplicated glyph from leaking accents */
  content: none !important;
}

/* Improve text rendering during transforms (helps Safari/Chrome)
   without forcing GPU 3D compositing. */
.preloader-wrap__char-inner,
.new-text-wrap__char-inner {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  will-change: transform;
}
/* End of New Text Animation Styles */


/* width of entire scrollbar */
::-webkit-scrollbar {
  width: 0px;
}

.grecaptcha-badge { 
  visibility: hidden !important; 
}

#main-footer {
    display:none;
}

/* ==========================================================================
   NOISE GIF OVERLAY FOR DIVI SECTION
   ========================================================================== */

/* Target the specific section using the class you added */
.divi-noise-overlay {
  position: relative; /* Needed for the ::before pseudo-element */
  overflow: hidden;   /* Optional: Ensures pseudo-element doesn't strictly overflow boundaries */
}

/* Create the overlay using a pseudo-element */
.divi-noise-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('https://classick.design/wp-content/uploads/2025/04/noise-gif.gif'); /* You can replace this URL if you have your own GIF */
  background-repeat: repeat;
  background-size: auto; /* Tiles the GIF at its natural size */
  background-position: center;
  opacity: 0.03; /* Adjust intensity: 0.03=subtle, 0.1=stronger */
  pointer-events: none; /* Allows clicks/hovers to pass through to content */
  z-index: 1; /* Places the overlay above the background */
}

/* Ensure section content (rows, modules) is above the noise overlay */
.divi-noise-overlay > .et_pb_row,
.divi-noise-overlay > .et_pb_module {
  position: relative; /* Needed for z-index to apply */
  z-index: 2; /* Places content above the z-index: 1 overlay */
}

/* ==========================================================================
   PARALLAX FOR BACKGROUND SECTIONS
   ========================================================================== */

/* This ensures we can control the background position with JavaScript */
.parallaw-bckgrnd {
    background-attachment: scroll, scroll !important;
}

/* ==========================================================================
   2. RESPONSIVE MISCELLANEOUS
   ========================================================================== */

@media only screen and (max-width: 980px) {
  .three-columns .et_pb_column { width: 33% !important; }
  .six_columns .et_pb_column   { width: 66% !important; }
  .five_columns .et_pb_column  { width: 20% !important; }
  .two_columns .et_pb_column   { width: 50% !important; }
  .four_columns .et_pb_column  { width: 25% !important; }
}