/*--------------------------------------------------------------

Template: Light
Author: xBoot
Author URI: http://wpfreethemeshop.com/
Version:  1.0
Design and Developed by: xBoot

Note: This is the file where you can add your custom styles to change the look of the theme. 
But don't modify "style.css" file.

---------------------------------------------------------------*/

/* ----------------------------------------------------
	You can put your custom CSS code here:
-------------------------------------------------------*/

/* --- Site Preloader (logo on brand color) --- */
#site-preloader {
  position: fixed;
  inset: 0;
  background: #009ab6;          /* your brand teal */
  display: grid;
  place-items: center;
  z-index: 99999;               /* above everything */
  opacity: 1;
  transition: opacity 400ms ease;
}

/* Fade out when body gets the 'loaded' class */
body.loaded #site-preloader {
  opacity: 0;
  pointer-events: none;
}

/* Remove from layout after fade for safety */
body.loaded #site-preloader { 
  animation: preloaderRemove 0s linear 450ms forwards;
}
@keyframes preloaderRemove { to { visibility: hidden; } }

.preloader-inner {
  display: grid;
  place-items: center;
}

.preloader-logo {
  width: min(180px, 40vw);      /* scales for mobile */
  height: auto;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  animation: logoIn 700ms cubic-bezier(.2,.8,.2,1) 150ms forwards;
  /* Optional: crisp edges on some browsers */
  image-rendering: -webkit-optimize-contrast;
}

@keyframes logoIn {
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ===== Scroll-Driven Marquee ===== */
.scroll-marquee{
  position: relative;
  overflow: hidden;
  padding: 28px 0 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background-color: #009ab6;
  
  display: flex;
  flex-direction: column;
  gap: 24px; /* spacing only between the two lines */
}

.scroll-marquee .marquee-row{
  line-height: 1.1;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .08em;
  will-change: transform;
  white-space: nowrap;
  margin: 0; /* remove top/bottom margin so gap takes control */
}

.scroll-marquee .marquee-row:nth-child(1){
  font-weight: 700;
  font-size: clamp(28px, 4vw, 60px);
}

.scroll-marquee .marquee-row:nth-child(2){
 font-weight: 700;
  font-size: clamp(28px, 4vw, 60px);
}

.scroll-marquee .marquee-track{
  display: inline-flex;
  align-items: center;
  will-change: transform;
}

.scroll-marquee .marquee-segment{
  flex: none;
  display: inline-block;
  padding-right: 8vw; /* visual gap between repeats */
}

.scroll-marquee .marquee-segment span{
  display: inline-block;
  margin-right: 2.2vw; /* gap between tokens */
}

/* Optional: adapt colors to your theme (your headings are white) */
.scroll-marquee, .scroll-marquee span{
  color: #fff;
}

/* If JS is disabled, don’t trap users on the loader */
.no-js #site-preloader { display: none; }