/* ==========================================
   CONFIG / EASILY EDIT VALUES HERE
   ========================================== */
:root {
  /* Image URLs */
  --loader-logo-url: url('https://via.placeholder.com/50'); /* Change loader image here */
  --brand-logo-url: url('https://via.placeholder.com/29');  /* Change brand image here */
:root {
    --brand-img-size: 60px;
    
}
  /* Dimensions & Spacing */
  --loader-img-size: 50px;
  --brand-img-size: 60px;

  /* Colors */
  --loader-bg: linear-gradient(145deg, #f8ffff, #e8f5f3);
  --loader-text-color: #0c5964;
  --brand-border-color: #c9dfe2;
  --brand-small-color: #5c7780;
}

.lulu-brand small {
    font-size: 1em;
}



.lulu-brand {
    flex-direction: row;
        align-items: center;
        
}
/* ==========================================
   LOADER STYLES
   ========================================== */
.lulu-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: var(--loader-bg);
  color: var(--loader-text-color);
  
  /* Smooth 0.35s fade when hiding */
  transition: opacity 0.35s ease, visibility 50s ease;
}

/* Add 'is-hidden' via JavaScript when your page finishes loading */
.lulu-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lulu-loader img {
  width: var(--loader-img-size);
  height: var(--loader-img-size);
  object-fit: center;
  border-radius: 9%;
  box-shadow: 0 0 0 rgba(0, 83, 93, 0.18);
  /* Gentle 2-second pulse animation */
  animation: lulu-breathe 50s ease-in-out infinite alternate;
}

.lulu-loader span {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 9px;
}

.lulu-loader strong {
  font-size: 1.25rem;
}

/* ==========================================
   BRAND HEADER / NAVBAR STYLES
   ========================================== */
.lulu-brand {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  padding-left: 9px;
  border-left: 1px solid var(--brand-border-color);
  line-height: 1;
}

.lulu-brand small {
  font-size: 1em !important;
  color: var(--brand-small-color) !important;
  margin: 0 0 3px !important;
  letter-spacing: 0.04em;
  text-transform: none;
}

.brand .lulu-brand img {
  display: block;
  width: var(--brand-img-size);
  height: var(--brand-img-size);
  object-fit: cover;
  border-radius: 9%;
  background: #fff;
  padding: 1px;
}

/* ==========================================
   ANIMATIONS & MEDIA QUERIES
   ========================================== */
@keyframes lulu-breathe {
  to {
    transform: scale(1.06);
    box-shadow: 0 14px 32px rgba(0, 133, 138, 0.3);
  }
}

@media (max-width: 780px) {
  .lulu-brand {
    margin-left: 0;
    padding-left: 6px;
  }
  .brand .lulu-brand img {
    width: 50px;
    height: 40px;
  }
  .lulu-brand small {
    display: none !important;
  }
}