@font-face {
    font-family: 'cresta';
    src: url('https://industrialerasteampunk.hux9.com/assets/fonts/CrestaSouraThin-j9Mo0.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'daily';
    src: url('https://industrialerasteampunk.hux9.com/assets/fonts/Daily-Spark-Script.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'satoshi';
    src: url('https://industrialerasteampunk.hux9.com/assets/fonts/Satoshi-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


:root {
  --bg-color: #eceac0;
  --m-color: #d6b184;
}

body::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #000;
}
body::-webkit-scrollbar
{
width: 6px;
background-color: #000;
}
body::-webkit-scrollbar-thumb
{
background-color: var(--m-color);
}
img {
    max-width: 100% ! IMPORTANT;
}
body.dark {
    background-color: #000;
    background-size: 100% 100% ! IMPORTANT;
}
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .dark div, .dark p, .dark strong, .dark ul li, .dark a {
    color: #fff !important;
}

.relative {
    position: relative;
}
.between {
    justify-content: space-between;
}
.center {
    text-align: center;
}
.container {
    margin: auto;
}
h3.fir {
    opacity: 0;
}
.ham-burger .line {
    width: 35px;
    height: 3px;
    background: var(--bg-color);
    margin-bottom: 9px;
}
.ham-burger {
    width: auto;
    display: table;
    border: 1px solid var(--bg-color);
    padding: 15px 15px 5px 15px;
}
header.main-header {
    padding: 20px 0px !important;
}
header.main-header .container {
    align-items: center;
}
.logo img {
    width: 250px;
    margin: auto;
    display: table;
}
.logo.relative a#logo img {
    transform: scale(4) translateY(90px);
}
.logo.relative a#logo {
    display: block;
}
body.dark {
    background-color: #000;
}
/* section#slider-sec {
    height: 100vh;
} */
header.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 11111;
    transition: 0.5s;
}
.lt {

    opacity: 0;
}
.tx {
    display: block;
    transform: translateY(100px);
    opacity: 0;
}
.top-txts h1 {
    display: flex;
    justify-content: center;
    margin-bottom: 0px;
    gap: 40px;
    overflow: hidden;
}
header.main-header.is-absolute {
    top: -250px;
}

/* header.main-header.is-absolute{
  position: absolute !important;
  top: 0;    
  left: 0;
  width: 100%;
} */
body {
    overflow-x: hidden !important;
}
.main-video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100vh;
    transform: scale(1.15);
}
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    top: 0;
    opacity: 0.8;
    left: 0;
    right: 0;
}
video.main-bg {
    width: 100%;
    height: 100%;
    filter: blur(5px);
}
#slider-sec .row.relative {
    height: 100vh;
    align-items: center;
}
h3 {
    font-family: 'daily', cursive !important;
    font-size: 30px;
    line-height: 40px;
}
/* .top-txt {
    transform: translateY(600px)scale(0);
    opacity: 0;
} */
html body.dark h1 {
    font-family: cresta !important;
    font-size: 120px;
    line-height: 130px;
    color: var(--m-color) !important;
}
html body p {
    font-family: satoshi ! IMPORTANT;
    font-size: 20px;
    line-height: 30px;
}




.philo__grid.row.align-items-center {
    padding-left: 100px;
}
.philo__media.col-lg-7 {
    padding-right: 100px;
}


.philo__step {
    opacity: 0.2;
}
.philo__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
  will-change: transform;
}
.philo__step.is-active {
    opacity: 1 !important;
}
.philo__img.is-active {
  opacity: 1;
} 
.philo__media.col-lg-6 {
    position: relative;
}
#philo { position: relative; overflow: hidden; isolation: isolate; }
#philo .philo__inner { position: relative; min-height: 100vh; display:flex; flex-direction:column; justify-content:center; }
/* section#philo {
    padding: 100px 100px ! IMPORTANT;
} */

#philo .philo__frame {
    position: relative;
    height: 600px;
}
.philo__step p {
    font-family: 'cresta' !important;
    font-size: 50px;
    line-height: 60px;
}
.philo__step {
    text-align: center;
    padding: 20px 20px;
}
.philo__step p {
    margin: 0px !important;
}
.philo__step.is-active p {
    color: var(--m-color) !important;
}
.philo__step.is-active {
    background: #3633287d ! IMPORTANT;
    color: var(--m-color) !important;
    position: relative;
}

.philo__step.is-active::before,a.works__btn:before {
  content: "";
  position: absolute;
  inset: -10px; /* outline-offset replacement */
  border-radius: 4px;

  background:
    linear-gradient(90deg, var(--m-color) 50%, transparent 50%) repeat-x,
    linear-gradient(90deg, var(--m-color) 50%, transparent 50%) repeat-x,
    linear-gradient(0deg,  var(--m-color) 50%, transparent 50%) repeat-y,
    linear-gradient(0deg,  var(--m-color) 50%, transparent 50%) repeat-y;

  background-size:
    12px 2px,   /* top */
    12px 2px,   /* bottom */
    2px 12px,   /* left */
    2px 12px;   /* right */

  background-position:
    0 0,
    0 100%,
    0 0,
    100% 0;

  animation: borderMove 0.4s linear infinite;
}

@keyframes borderMove {
  0% {
    background-position:
      0 0,
      0 100%,
      0 0,
      100% 0;
  }
  100% {
    background-position:
      24px 0,
      -24px 100%,
      0 24px,
      100% -24px;
  }
}
h1.philo__title.center span {
    position: relative;
}
.works__track {
    height: 75vh;
}
section#buy-sec {
    padding: 200px 80px ! IMPORTANT;
}
.buttons.center-btnnn {
    display: flex;
    align-items: center;
    gap: 20px;
}
.buttons.center-btnnn a {
    margin: unset;
}
.buttons.center-btnnn {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding-top: 30px;
}
a.works__btn.secn {
    background: #ebebb8 !important;
}

h1.philo__title.center span:before {
    content: '';
    background-image: url(https://industrialerasteampunk.hux9.com/assets/images/setting.png);
    background-size: 100% 100%;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 35px;
    left: 80px;
    background-color: #000;
    border-radius: 60px ! IMPORTANT;
    border: 5px solid #000;
    animation: gearRotate 2.5s linear infinite;
    right: 0;
    margin: auto;
}
.philo__step.is-active p:before {
    content: '';
    background-image: url(https://industrialerasteampunk.hux9.com/assets/images/setting.png);
    background-size: 100% 100%;
    width: 33px;
    height: 33px;
    position: absolute;
    top: -22px;
    left: -25px;
    background-color: #000;
    border-radius: 60px ! IMPORTANT;
    border: 5px solid #000;
     animation: gearRotate 2.5s linear infinite;
}
.philo__step.is-active p::after {
    content: '';
    background-image: url(https://industrialerasteampunk.hux9.com/assets/images/setting.png);
    background-size: 100% 100%;
    width: 33px;
    height: 33px;
    position: absolute;
    bottom: -22px;
    right: -25px;
    background-color: #000;
    border-radius: 60px ! IMPORTANT;
    border: 5px solid #000;
     animation: gearRotate 2.5s linear infinite;
}

/* a.works__btn:before {
    content: '';
    background-image: url(https://industrialerasteampunk.hux9.com/assets/images/setting.png);
    background-size: 100% 100%;
    width: 33px;
    height: 33px;
    position: absolute;
    bottom: -22px;
    right: -25px;
    background-color: #000;
    border-radius: 60px ! IMPORTANT;
    border: 5px solid #000;
    animation: gearRotate 2.5s linear infinite;
}

a.works__btn::after {
    content: '';
    background-image: url(https://industrialerasteampunk.hux9.com/assets/images/setting.png);
    background-size: 100% 100%;
    width: 33px;
    height: 33px;
    position: absolute;
    bottom: 48px;
    left: -25px;
    background-color: #000;
    border-radius: 60px ! IMPORTANT;
    border: 5px solid #000;
    animation: gearRotate 2.5s linear infinite;
} */

a.works__btn img.lf {
    position: absolute;
    top: -20px;
    left: -20px;
    border: 8px solid;
    background: #000;
    border-radius: 50px ! IMPORTANT;
    width: 35px;
    animation: gearRotate 2.5s linear infinite;
}

a.works__btn img.rg {
    position: absolute;
    bottom: -20px;
    right: -20px;
    border: 8px solid;
    background: #000;
    border-radius: 50px ! IMPORTANT;
    width: 35px;
    animation: gearRotate 2.5s linear infinite;
}


/* Smooth infinite rotate */
@keyframes gearRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Opposite direction (optional) */
@keyframes gearRotateReverse {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

/* ✅ IMPORTANT: !important sahi likho */


/* =========================
   PROC SECTION BASE
========================= */
#proc-sec{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0 70px !important;
  min-height: 100vh !important;
  margin: 0 !important;
}

/* title */
#proc-sec > .content{
  padding-top: 40px;
  padding-bottom: 10px;
}

/* this area gets pinned */
#proc-sec .proces-section{
  position: relative;
  height: 100vh;
}

/* pin wrapper (pinned element) */
#proc-sec .proc-pin{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

/* =========================
   CARDS STACK (ABSOLUTE)
========================= */
#proc-sec{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}


.proces-card {
	padding: 80px 60px;
	border-radius: 30px ! IMPORTANT;
	background-size: cover;
}

.proces-card .overlay {
	background-size: cover;
}

.proces-card .cards {
	position: relative;
	z-index: 1111;
}

.proces-card .overlay {
	background-size: cover;
	filter: blur(13px) grayscale(1);
}

.proces-section {
	padding: 40px 0px ! IMPORTANT;
}

.proces-card .single-image {
	rotate: -10deg;
}

.proces-card p {
	font-size: 30px ! IMPORTANT;
	line-height: 40px;
	opacity: 0.5;
	width: 70%;
}

.proces-card::before {
	inset: -36px;
	border-radius: 0px ! IMPORTANT;
}

.proces-card.cardi {
	position: absolute;
	top: 0;
	left: 0%;
}

.proces-card.cardi {
	position: absolute;
	top: 40px;
	left: 0;
	bottom: 0;
	margin: auto;
    inset: 0;
	/* transform: translateX(110%); */
	z-index: 11111;
}

#proc-sec {
	margin: 0;
	/* ✅ important */
	padding: 0;
	/* apne hisaab se */
	position: relative;
	/* overflow: hidden; */
	/* ✅ prevents margin collapse / small shifts */
}

.proces-section {
	position: relative;
	height: 100vh;
	/* pinned viewport */
}

section#gap {
	padding: 100px 0px ! IMPORTANT;
}
#proc-sec .proc-pin{
  position: relative;
  height: 100vh;          /* ✅ pin area fixed */
  /* overflow: hidden; */
}
.proces-card.card1 {
    margin-top: -240px;
}
.proces-card.cardi {
    height: 720px;
    margin-top: 0px !important;
}

#works-sec{
  position: relative;
  isolation: isolate;
}

#works-sec .works__inner{
  min-height: 100vh;          /* pin area */
}
.works__item img {
    width: 100%;
}
.works__item {
    position: absolute;
    width: 55%;
    left: 0;
    right: 0;
    margin: auto;
}
.works__item.item1 {
    z-index: 4;
}
.works__item.item2 {
    z-index: 3;
    left: 120px;
}
.works__item.item3 {
    left: 250px;
    z-index: 2;
}
.works__item.item4 {
    left: 370px;
    z-index: 1;
}
a.works__btn {
    background: #d6b184 ! IMPORTANT;
    font-family: 'satoshi';
    color: #000 !important;
    margin: auto;
    display: table;
    text-decoration: unset;
    font-weight: 700;
    padding: 20px 200px;
    position: relative;
}
#step-sec .single-image a {
    margin: auto;
    display: table;
}




/* ====== FOOTER BASE ====== */
.ie-footer{
  padding: 60px 40px;
  position: relative;
}

/* Outer frame look */
.ie-footer__frame{
  position: relative;
  border: 1px solid rgba(210, 180, 120, 0.20);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.70));
}

/* soft smoky overlay */
.ie-footer__frame::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("assets/footer-smoke.png") center/cover no-repeat;
  opacity: .35;
  filter: blur(2px);
  pointer-events:none;
}

/* inner padding */
.ie-footer__inner{
  position: relative;
  z-index: 2;
}

/* ====== LAYOUT ====== */
.ie-footer__top{
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 30px;
  align-items: start;
}

.ie-footer__col{
  padding: 10px 10px;
}

.ie-footer__col--center{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* vertical separator lines in center */
.ie-footer__centerLines{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.ie-footer__vline{
  width: 1px;
  background: rgba(210,180,120,0.18);
  margin: 0 18px;
}

/* ====== TITLES + LISTS ====== */
html body .ie-footer__title {
    font-family: serif;
    font-size: 22px;
    letter-spacing: .2px;
    color: var(--m-color) !important;
    margin: 0 0 10px;
    font-family: 'cresta';
    font-size: 46px;
    line-height: 50px;
}

.ie-footer__divider{
  position: relative;
  height: 10px;
  margin-bottom: 18px;
}
.ie-footer__divider span{
  position:absolute;
  left: 0;
  top: 50%;
  width: 72px;
  height: 1px;
  background: rgba(210,180,120,0.25);
  transform: translateY(-50%);
}
.ie-footer__divider::after{
  content:"";
  position:absolute;
  left: 30px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(210,180,120,0.65);
  transform: translateY(-50%);
}

.ie-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 56px;
    opacity: 0.7;
}

.ie-footer__list a {
    color: rgba(255, 255, 255, 0.60);
    text-decoration: none;
    transition: opacity .2s ease, transform .2s ease;
    font-family: 'satoshi';
    font-size: 20px;
}
.ie-footer__list a:hover{
  opacity: .95;
  transform: translateX(2px);
}


.ie-footer__col--right .ie-footer__divider span{
  left: auto;
}
.ie-footer__col--right .ie-footer__divider::after {
    left: 30px;
}

/* ====== BRAND ====== */
.ie-footer__brand{
  text-align: center;
  margin-top: 6px;
  margin-bottom: 18px;
}

.ie-footer__logo {
    width: 450px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 12px;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.6));
}

.ie-footer__sub {
    margin: 0;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'satoshi' ! IMPORTANT;
    opacity: 0.7;
}

/* ====== NEWSLETTER FIELD ====== */
.ie-footer__form{
  width: 100%;
  max-width: 560px;
  position: relative;
  margin-top: 10px;
}

.ie-footer__field{
  display: grid;
  grid-template-columns: 1fr 180px;
  border: 1px solid rgba(210,180,120,0.25);
  border-radius: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}

.ie-footer__field input{
  height: 52px;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(255,255,255,0.75);
  padding: 0 16px;
  font-size: 14px;
}

.ie-footer__field input::placeholder{
  color: rgba(255,255,255,0.45);
}

.ie-footer__field button {
    height: 52px;
    border: 0;
    cursor: pointer;
    background: rgba(210, 180, 120, 0.90);
    color: #14110e;
    font-weight: 600;
    letter-spacing: .2px;
    transition: filter .2s ease;
    font-family: 'satoshi' !important;
}
section#philo {
    padding-top: 60px ! IMPORTANT;
}
.ie-footer__field button:hover{
  filter: brightness(1.06);
}


.ie-footer__railDot--left{ left: 110px; }
/* .ie-footer__railDot--right{ right: 110px; } */



.ie-footer__railArrow--right{ right: 70px; transform: translateY(-50%) rotate(-135deg); }

/* ====== BOTTOM BAR ====== */
.ie-footer__bottom{
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(210,180,120,0.12);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.ie-footer__copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.40);
    font-size: 16px;
    font-family: 'satoshi' ! IMPORTANT;
    opacity: 0.7;
}

.ie-footer__credit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 20px;
    font-family: 'satoshi';
}

.ie-footer__credit span {
   
    opacity: 0.7;
}
.ie-footer__credit img{
  height: 28px;
  width: auto;
  display: block;
}
.ie-footer__credit img {
    height: 58px;
    width: auto;
    display: block;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 992px){
  .ie-footer__top{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .ie-footer__centerLines{ display:none; }
  .ie-footer__list--right{ justify-items: start; }
  .ie-footer__col--right .ie-footer__divider span{ left: 0; right: auto; }
  .ie-footer__col--right .ie-footer__divider::after{ left: 30px; right:auto; }
  .ie-footer__formRail{ left: -40px; right: -40px; }
}
@media (max-width: 560px){
  .ie-footer{ padding: 40px 16px; }
  .ie-footer__inner{ padding: 28px 18px 20px; }
  .ie-footer__field{ grid-template-columns: 1fr; }
  .ie-footer__field button{ width: 100%; }
  .ie-footer__formRail{ display:none; }
}
.ie-footer__inner {
    overflow: hidden;
    position: relative;
}
.ie-footer__inner .overly {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    filter: grayscale(1) brightness(0.5);
    top: 0;
    left: 0;
    z-index: -1;
}
.foot-main {
    backdrop-filter: blur(13px);
    padding: 40px 40px ! IMPORTANT;
}
.philo__media.col-lg-7 {
    transform: rotate(4deg);
}

html {
    overflow-x: hidden !important;
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1920px) {}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1600px) {
    .ie-footer__form {
    max-width: 470px;
    margin-top: 10px;
}
    .proces-card.cardi {
    height: 600px;
}
    #philo .philo__frame {
    height: 500px;
}
.philo__step {
    text-align: center;
    padding: 15px 15px;
}
    .logo.relative a#logo img {
    transform: scale(3) translateY(90px);
}
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1440px) {
    h1.philo__title.center span:before {
    width: 35px;
    height: 35px;
    top: 30px;
    left: 70px;
}
    .ie-footer__form {
        max-width: 90% ! IMPORTANT;
        margin-top: 10px;
    }
    #step-sec .single-image a {
    width: 70%;
}
    html body.dark h1 {
    font-size: 105px;
    line-height: 115px;
}
        #philo .philo__frame {
        height: 480px;
    }
    .philo__media.col-lg-7 {
    padding-right: 60px;
}
.philo__grid.row.align-items-center {
    padding-left: 60px;
}
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1366px) {
    .ie-footer__logo {
    width: 290px;
    }
    .works__track {
    height: 65vh;
}
    .proces-card p {
    font-size: 24px ! IMPORTANT;
    line-height: 34px;
    width: 90%;
}
        #philo .philo__frame {
        height: 450px;
    }
    .philo__step p {
    font-size: 40px;
    line-height: 50px;
}
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1340px) {}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1320px) {}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1280px) {}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1024px) {}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 840px) {}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 768px) {}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 525px) {}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 430px) {}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 375px) {}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 360px) {}