/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 06 2026 | 07:56:12 */
/* =====================================
   SECTION
===================================== */

.iv-test{
  width:100%;
  min-height:100vh;
  background:#fff;
  overflow:hidden;
}


/* =====================================
   CONTAINER
===================================== */

.iv-test-container{
  width:min(1400px,92%);
  min-height:760px;
  margin:auto;

  display:grid;
  grid-template-columns:1.25fr .75fr;

  gap:90px;
  align-items:center;
}


/* =====================================
   GALLERY
===================================== */

.iv-gallery{
  position:relative;
  height:650px;
}


/* =====================================
   BIG BACK NUMBER
===================================== */

.iv-big-number{
  position:absolute;

  left:-45px;
  top:50%;

  transform:translateY(-50%);

  color:#f1f1f1;

  font-size:clamp(180px,20vw,320px);

  font-weight:900;

  line-height:.7;

  letter-spacing:-18px;

  z-index:1;

  pointer-events:none;
}


/* =====================================
   RED LINE
===================================== */

.iv-red-line{
  position:absolute;

  left:0;
  top:80px;

  width:100px;
  height:1px;

  background:#e52529;

  z-index:10;
}

.iv-red-line:after{
  content:"";

  position:absolute;

  right:0;
  top:50%;

  width:7px;
  height:7px;

  background:#e52529;

  transform:
    translateY(-50%)
    rotate(45deg);
}


/* =====================================
   MAIN IMAGE
===================================== */

.iv-main{
  position:absolute;

  left:6%;
  top:50%;

  width:78%;
  height:600px;

  transform:translateY(-50%);

  overflow:hidden;

  background:#eee;

  z-index:3;
}


/* IMAGE */

.iv-main img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  will-change:
    transform,
    opacity;
}


/* =====================================
   LEAF EXIT
===================================== */

.iv-main.exit img{

  animation:
    ivExit
    .8s
    cubic-bezier(.55,.05,.8,.2)
    forwards;

}


@keyframes ivExit{

  0%{

    transform:
      translate3d(0,0,0)
      rotate(0deg)
      scale(1);

    opacity:1;

  }

  100%{

    transform:
      translate3d(130px,-180px,0)
      rotate(12deg)
      scale(.82);

    opacity:0;

  }

}


/* =====================================
   NEW IMAGE ENTER
===================================== */

.iv-main.enter img{

  animation:
    ivEnter
    .9s
    cubic-bezier(.16,1,.3,1)
    forwards;

}


@keyframes ivEnter{

  0%{

    transform:
      translate3d(0,120%,0)
      rotate(-3deg)
      scale(1.05);

    opacity:0;

  }

  100%{

    transform:
      translate3d(0,0,0)
      rotate(0deg)
      scale(1);

    opacity:1;

  }

}


/* =====================================
   FRAME
===================================== */

.iv-frame{
  position:absolute;

  inset:15px;

  border:
    1px solid
    rgba(255,255,255,.8);

  z-index:5;

  pointer-events:none;
}


/* =====================================
   ONLY ONE COUNTER
===================================== */

.iv-counter{
  position:absolute;

  left:25px;
  top:25px;

  z-index:10;

  display:flex;

  align-items:baseline;

  gap:8px;

  color:#fff;

  text-shadow:
    0 2px 15px rgba(0,0,0,.5);

  pointer-events:none;
}

.iv-counter strong{
  font-size:42px;

  line-height:1;

  font-weight:900;

  letter-spacing:-3px;
}

.iv-counter span{
  font-size:9px;

  letter-spacing:3px;

  color:rgba(255,255,255,.75);
}


/* =====================================
   RED CORNER
===================================== */

.iv-corner{
  position:absolute;

  right:0;
  top:0;

  width:65px;
  height:65px;

  background:#e52529;

  z-index:8;

  pointer-events:none;
}


/* =====================================
   NEXT IMAGE
===================================== */

.iv-next-preview{
  position:absolute;

  right:0;
  bottom:15px;

  width:190px;
  height:255px;

  padding:7px;

  background:#fff;

  z-index:20;

  cursor:pointer;

  transform:rotate(5deg);

  box-shadow:
    0 25px 55px
    rgba(0,0,0,.17);

  transition:
    transform .5s ease,
    box-shadow .5s ease;
}

.iv-next-preview:hover{

  transform:
    translateY(-12px)
    rotate(1deg);

  box-shadow:
    0 30px 65px
    rgba(0,0,0,.22);

}

.iv-next-preview img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:
    transform .6s ease;
}

.iv-next-preview:hover img{
  transform:scale(1.06);
}


/* THUMB ARROW */

.iv-next-arrow{
  position:absolute;

  right:12px;
  bottom:12px;

  width:36px;
  height:36px;

  display:flex;

  align-items:center;
  justify-content:center;

  background:#fff;

  color:#111;

  font-size:16px;

  box-shadow:
    0 5px 15px
    rgba(0,0,0,.18);
}


/* =====================================
   CONTENT
===================================== */

.iv-content{
  max-width:440px;
}


/* LABEL */

.iv-label{
  display:flex;

  align-items:center;

  gap:12px;

  color:#e52529;

  font-size:9px;

  font-weight:700;

  letter-spacing:5px;

  text-transform:uppercase;

  margin-bottom:22px;
}

.iv-label i{
  display:block;

  width:36px;
  height:1px;

  background:#e52529;
}


/* =====================================
   TITLE
===================================== */

.iv-title{
  margin:0 0 30px;

  font-size:
    clamp(55px,6vw,92px);

  line-height:.82;

  font-weight:900;

  letter-spacing:-7px;

  text-transform:uppercase;
}

.iv-title span{
  color:transparent;

  -webkit-text-stroke:
    1px #111;
}


/* =====================================
   DESCRIPTION
===================================== */

.iv-description{
  max-width:330px;
  margin:0 0 42px;
  color:#777;
  line-height:2;
}


/* =====================================
   INFO
===================================== */

.iv-info{
  max-width:340px;

  border-top:
    1px solid #ddd;
}

.iv-info-row{
  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:12px 0;

  border-bottom:
    1px solid #eee;
}

.iv-info-row small{
  color:#999;
  letter-spacing:2px;
  text-transform:uppercase;
}

.iv-info-row strong{
  color:#111;
  letter-spacing:2px;
  text-transform:uppercase;
}


/* =====================================
   CONTROLS
===================================== */

.iv-controls{
  display:flex;

  align-items:center;

  gap:8px;

  margin-top:35px;
}

.iv-controls button{
  width:48px;
  height:48px;

  border:1px solid #111;

  background:#fff;

  color:#111;

  cursor:pointer;

  font-size:17px;

  transition:.3s ease;
}

.iv-controls button:hover{
  background:#111;
  color:#fff;
}

.iv-controls button.next:hover{
  background:#e52529;
  border-color:#e52529;
}


/* =====================================
   PROGRESS
===================================== */

.iv-progress{
  width:155px;

  height:2px;

  margin-left:12px;

  background:#ddd;

  position:relative;
}

.iv-progress span{
  position:absolute;

  left:0;
  top:0;

  width:2.38%;
  height:100%;

  background:#e52529;

  transition:
    width .5s ease;
}


/* =====================================
   TABLET
===================================== */

@media(max-width:1000px){

  .iv-test-container{
    gap:45px;
  }

  .iv-main{
    left:2%;
    width:84%;
  }

  .iv-next-preview{
    width:145px;
    height:205px;
  }

}


/* =====================================
   MOBILE
===================================== */

@media(max-width:700px){

  .iv-test-container{
    width:90%;

    display:block;

    min-height:0;
  }

  .iv-gallery{
    height:560px;

    margin-top:30px;
  }

  .iv-main{
    left:0;

    width:88%;

    height:500px;
  }

  .iv-big-number{
    left:-10px;

    font-size:160px;

    letter-spacing:-10px;
  }

  .iv-next-preview{
    right:-3px;

    bottom:15px;

    width:125px;
    height:175px;

    padding:5px;
  }

  .iv-next-arrow{
    width:30px;
    height:30px;

    right:9px;
    bottom:9px;
  }

  .iv-counter{
    left:20px;
    top:20px;
  }

  .iv-counter strong{
    font-size:33px;
  }

  .iv-corner{
    width:50px;
    height:50px;
  }

  .iv-frame{
    inset:10px;
  }

  .iv-content{
    padding-top:35px;
  }

  .iv-title{
    font-size:52px;
    letter-spacing:-5px;
  }

  .iv-progress{
    width:105px;
  }

}