/* ---------- Title ---------- */
#foursectitle {
  background: #fff;
  z-index: 9999;
  width: 100%;
  position: relative; /* becomes fixed by .fixed-title */
  transition: none;
  box-sizing: border-box;
}

/* When title is fixed we apply this class */
#foursectitle.fixed-title {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
  transform: translateY(0);
}

/* spacer inserted below #foursectitle when fixed to prevent layout jump */
#foursectitle-spacer {
  display: none;
  width: 100%;
  height: 0;
}

/* show spacer when title fixed */
body.has-fixed-title #foursectitle-spacer {
  display: block;
  height: var(--title-height, 0px);
}

/* ---------- Slides wrapper ---------- */
#vertical-pin-container {
  position: relative;
  width: 100%;
}

/* The element we pin and animate */
#vertical-pin-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 600px;

  /* the wrapper itself does not have a fixed height; slides control viewport height */
}

/* ---------- Slides ---------- */
/* default slide sizing — we use CSS variables for dynamic title height */
:root {
  --title-height: 0px;
  --slide-top: 0px;
  --slide-height: 600px;
}

/* When title is fixed we subtract title height from slide height and move slides down */
body.has-fixed-title {
  --slide-top: var(--title-height);
  --slide-height: calc(600px - var(--title-height));
}

.v-slide {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--slide-top);              /* place slides under title when fixed */
  height: var(--slide-height); 
  min-height: 600px;       /* height adjusted for fixed title */
  width: 100%;
  transform: translateY(100%);        /* start off-screen below */
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
}

/* slide content z-index so content stays above backgrounds */
.v-slide .container {
  position: relative;
  z-index: 2;
}
.v-slide:first-of-type {
  transform: translateY(0) !important;
}


/* ---------- Mobile fallback ---------- */
@media (max-width: 991px) {
  #foursectitle { position: relative !important; }
  #foursectitle.fixed-title { position: relative; box-shadow: none; }
  #foursectitle-spacer { display: none !important; height: 0 !important; }

  #vertical-pin-wrapper { overflow: visible; height: auto; }
  .v-slide {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    height: auto !important;
    min-height: 420px;
    padding: 40px 0;
  }
}

/* Background classes (your existing images) */
.digital-marketingbg { background-image: url('../images/digital-marketing-bg.png'); }
.webobile { background-image: url('../images/webandmobile-bg.png'); }
.webdesign { background-image: url('../images/web-design-bg.png'); }
.webhosting { background-image: url('../images/web-hosting-bg.png'); }
.aiservivesbg { background-image: url('../images/AI-services-bg.png'); }

.digital-marketingbg, .aiservivesbg, .webhosting, .webdesign, .webobile{
  background-size: cover;
  background-repeat: no-repeat;
}

/* buttons */
.v-slide a.btn, .v-slide a.btn:hover {
  color: #fff;
  border-color: #fff;
}
.vertical-static-wrapper-main a.btn, .vertical-static-wrapper-main a.btn:hover{
  color: #fff;
  border-color: #fff;
}
/* Smooth transitions */
.v-slide {
    transition: transform 0.3s ease-out !important;
}

/* Better scroll performance */
#vertical-pin-container,
#vertical-pin-wrapper {
    -webkit-overflow-scrolling: touch;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Optimized fixed title */
#foursectitle.fixed-title {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* animation: slideUp 0.3s ease-out; */
    /* will-change: transform; */
}

/* @keyframes slideUp {
    from { transform: translateY(10%); }
    to { transform: translateY(0%); }
} */

/* Smooth scroll container */
html {
    scroll-behavior: smooth;
}

/* Better slide positioning */
.v-slide:not(:first-child) {
    transform: translateY(100%);
}

.v-slide.active {
    transform: translateY(0) !important;
}