/** { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }*/

.herog { width: 100vw; height: 100vh; }

.slideg {
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
}

.slideg1 { background-image: url(https://beta.cartyuga.in/image/catalog/banners/slSignatureCollection.jpg); }
.slideg2 { background-image: url(https://beta.cartyuga.in/image/catalog/banners/sl2RawCollection.jpg); }
.slideg3 { background-image: url(https://beta.cartyuga.in/image/catalog/banners/sl3AdventureCollection.jpg); }
.slideg4 { background-image: url(https://beta.cartyuga.in/image/catalog/banners/sl4CricketCollection.jpg); }
.slideg5 { background-image: url(https://beta.cartyuga.in/image/catalog/banners/sl5Polo.jpg); }

/* Frame wrapper */
.frameg {
  position: absolute;
  inset: 32px;
  pointer-events: none;
}

/* Base line style */
.line {
  position: absolute;
  background: rgba(255,255,255,0.95);
}

/* Horizontal lines */
.top, .bottom {
  height: 1px;
  width: 100%;
  left: 0;
  transform: scaleX(0);
  transform-origin: center;
}

.top { top: 0; }
.bottom { bottom: 0; }

/* Vertical lines */
.left, .right {
  width: 1px;
  height: 100%;
  top: 0;
  transform: scaleY(0);
  transform-origin: center;
}

.left { left: 0; }
.right { right: 0; }

/* Animate ONLY active slide */
.glide__slide--active .top,
.glide__slide--active .bottom {
  animation: drawHorizontal 2s ease-out forwards;
}

.glide__slide--active .left,
.glide__slide--active .right {
  animation: drawVertical 2s ease-out forwards;
}

/* Reset when inactive */
.glide__slide:not(.glide__slide--active) .line {
  transform: scale(0);
}

/* Keyframes */
@keyframes drawHorizontal {
  to { transform: scaleX(1); }
}

@keyframes drawVertical {
  to { transform: scaleY(1); }
}