.header {
position: sticky;
top: 0;
z-index: 9999;
background-color: #672146;
}

/* Fullscreen loader */

#page-loader {
position: fixed;
inset: 0;
background-color: #ffffff; /* change if needed */
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* Image animation */
.loader-image {
width: 140px;
height: auto;
animation: zoomFade 1.2s ease-in-out infinite;
}

/* Animation keyframes */
@keyframes zoomFade {
0% {
transform: scale(0.9);
opacity: 0.6;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.6;
}
}

/* Hide loader */
#page-loader.hide {
opacity: 0;
visibility: hidden;
}


/* footer social icons */
.footer-social {
display: flex;
gap: 12px;
}

.footer-social a {
width: 38px;
height: 38px;
background: #672146;          /* your brand color */
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.3s ease;
}

.footer-social a:hover {
background: #9c0057;
transform: translateY(-3px);
}

/* end footer social icons */




/* mobile full screen design */

@media (max-width: 767.98px) {

  html, body { margin: 0; }

  /* Each panel = exactly half of the VISIBLE screen (dvh follows Safari/Chrome toolbars).
     Set --header-h only if a fixed header sits above the hero. */
  html body .split-panel {
    --half: calc((100vh - var(--header-h, 0px)) / 2);
    --half: calc((100svh - var(--header-h, 0px)) / 2);
    --half: calc((100dvh - var(--header-h, 0px)) / 2);
    height: var(--half) !important;
    min-height: var(--half) !important;
    max-height: var(--half) !important;
    flex: 0 0 var(--half) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start;
    overflow: hidden !important;
    padding: clamp(10px, 2.2svh, 24px) clamp(16px, 5vw, 28px) !important;
  }

  /* wrapper: no height of its own, no gaps */
  html body *:has(> .split-panel) { height: auto !important; min-height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; gap: 0 !important; }

  /* everything inside scales with the screen HEIGHT, so it fits on small phones too */
  /* .split-panel img,
  .split-panel svg { max-height: clamp(34px, 9svh, 80px); width: auto; max-width: 78%; height: auto; } */

    .split-panel img,
  .split-panel svg {
    max-height: clamp(56px, 15svh, 130px);
    width: auto;
    max-width: 70%;
    height: auto;
  }

  .split-panel h1, .split-panel h2, .split-panel h3 {
    font-size: clamp(1.05rem, 3.4svh, 1.7rem) !important;
    line-height: 1.15 !important;
    margin: 0 0 clamp(4px, 1svh, 10px) !important;
  }
  .split-panel p {
    font-size: clamp(0.78rem, 2.1svh, 1rem) !important;
    line-height: 1.35 !important;
    margin: 0 0 clamp(6px, 1.4svh, 14px) !important;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .split-panel .btn, .split-panel a.btn, .split-panel button {
    padding: clamp(7px, 1.5svh, 12px) clamp(16px, 5vw, 24px) !important;
    font-size: clamp(0.8rem, 2svh, 1rem) !important;
    min-height: 0 !important;
  }
}

/* very short screens (small phones, landscape): tighten further */
@media (max-width: 767.98px) and (max-height: 600px) {
  .split-panel p { -webkit-line-clamp: 2; }
  .split-panel img, .split-panel svg { max-height: 48px; }
}