/* @import url('https://fonts.googleapis.com/css2?family=Gaegu&display=swap'); */
@import url("https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&display=swap");

@font-face {
font-family: GalanoGrotesque;
src: url("_GalanoGrotesqueMedium.otf");
}
@font-face {
font-family: GalanoGrotesqueMedium;
src: url("GalanoGrotesqueMedium.otf");
}
@font-face {
font-family: Galano;
src: url("GalanoGrotesqueRegular.otf");
}
@font-face {
font-family: GalanoBold;
src: url("GalanoGrotesqueDEMO-Bold.otf");
}
@font-face {
font-family: 'Uhudscript';
src: url('/-global-assets/fonts/Uhudscript-Demo.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

body {
background-color: #f9f9f9;
}
html,
body {
width: 100%;
overflow-x: hidden !important;
}

a {
    text-decoration: none !important;
}

.wood-bg {
background: url("../Images/i-smokestack-our-story-instructions-wooden-board.webp");
background-repeat: no-repeat;
background-size: cover;

width: 100%;
height: 100%;

position: relative;
}
.book-cover {
height: 80vh;
}
.book-cover img {
height: 100%;
}
.rel-book {
position: relative;
height: 100%;
}
.book {
position: absolute;
right: 0px;
top: 50%;
transform: translate(0, -50%);
}
.home-area {
background: linear-gradient(
90deg,
#02bcdd 0%,
#06d1e5 22.09%,
#64eda8 51.94%,
#d0f88d 100%
);
color: #000 !important;
}
.home-area-2 {
background: linear-gradient(
90deg,
#02bcdd 0%,
#06d1e5 22.09%,
#64eda8 51.94%,
#d0f88d 100%
);
color: #000 !important;
}

.floating-home {
position: absolute;
top: 50%;
left: 0px;
transform: translate(0%, -50%);
}
.floating-home-2 {
position: absolute;
z-index: 999;
top: 50%;
right: -8px !important;
transform: translate(0%, -50%);
}

.flipbook-viewport {
background: url("../Images/i-smokestack-our-story-dark-blue-background.webp");
width: 100%;
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
position: relative;
}

.flipbook-viewport .container-1 {
position: absolute;
top: 50%;
left: 50%;
margin: auto;
/* overflow: hidden; */
}

.flipbook-viewport .flipbook {
width: 990px;
height: 600px;
left: -410px;
top: -280px;
}

.flipbook-viewport .page {
width: 461px;
height: 600px;
background-repeat: no-repeat;
background-size: 100% 100%;
}


.flipbook-viewport .page img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 0;
}

.floating-home button {
width: 40px;
height: 40px;
border: none;
background: #fefffe;
border: none;
border-radius: 50%;
color: #000;
margin-left: -5px;
position: absolute;
z-index: 3;
top: 0;
font-size: 20px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.floating-home-2 button {
width: 40px;
height: 40px;
border: none;
background: #fefffe;
border: none;
border-radius: 50%;
/* color: #fff; */
margin-left: -5px;
position: absolute;
z-index: 3;
top: 0;
font-size: 20px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.home-area {
height: 0px;
width: 40px;
position: relative;
/* left: -91px; */
z-index: 2;
top: 20px;
left: -5px;
/* width:0px; */
/* opacity: 0; */
padding-left: 15px;
/* padding: 0px 20px; */
/* border-radius: 25px; */
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
/* transform: rotate(270deg); */
position: relative;
/* display: inline-block; */
transition: height 1s;
overflow: hidden;
white-space: nowrap;
display: inline-block;
/* width:0%; */
}

.home-area a {
font-family: "Gaegu", cursive;
font-size: 18px;
text-decoration: none;

transform: rotate(270deg);
display: inline-block;
line-height: 40px;
color: #000 !important;
position: absolute;
left: -64px;
top: 92px;
}

.floating-home:hover .home-area {
height: 220px;
}

.home-area-2 {
height: 0px;
width: 40px;
position: relative;
/* left: -91px; */
z-index: 2;
top: 20px;
left: -5px;
/* width:0px; */
/* opacity: 0; */
padding-left: 15px;
/* padding: 0px 20px; */
/* border-radius: 25px; */
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
/* transform: rotate(270deg); */
position: relative;
/* display: inline-block; */
transition: height 1s;
overflow: hidden;
white-space: nowrap;
display: inline-block;
/* width:0%; */
}

.home-area-2 a {
font-family: "Gaegu", cursive;
font-size: 18px;
text-decoration: none;

transform: rotate(270deg);
display: inline-block;
line-height: 40px;
color: #000 !important;
position: absolute;
left: -44px;
top: 92px;
}

.floating-home-2:hover .home-area-2 {
height: 220px;
}

/* instruction area starts*/

.instructions-area {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.instruction-txt h2 {
font-family: "GalanoGrotesqueMedium", sans-serif;
color: #fff;
font-size: 32px;
margin-bottom: 20px;
}
.instruction-label {
text-align: center;
}
.instruction-label img {
width: 55%;
}
.underline-img img {
width: 75%;
}
.instr-bx {
background: url("../Images/i-smokestack-our-story-brown-story-card-box.webp");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.bx-img {
text-align: center;
}
.bx-img img {
width: 85%;
}
.second-grp .instr-bx {
height: 150px;
width: 100%;
}
.side-img {
text-align: end;
}
.side-img img {
width: 70%;
}
.side-img-2 {
text-align: start;
}
.side-img-2 img {
width: 70%;
}
.instruct-book {
text-align: end;
}
.instruct-book img {
width: 75%;
}
.instruct-book-2 {
text-align: start;
}
.instruct-book-2 img {
width: 75%;
}
.book-instruction {
position: relative;
}
.bx-img {
position: absolute;
top: 50%;
left: 64%;

transform: translate(-50%, -50%);
}
.bx-img img {
width: 100px;
}
.bx-img-2 {
position: absolute;
top: 50%;
left: 38%;

transform: translate(-50%, -50%);
}

.bx-img-2 img {
width: 100px;
}
.mb-30 {
margin-bottom: 35px;
}
.side-text {
position: absolute;
top: 30%;
left: 45%;
text-align: center;

/* transform: translate(-50, -50%); */
}
.side-text h3 {
color: #fff;
font-family: "GalanoGrotesqueMedium", sans-serif;
font-size: 18px;
font-weight: 700 !important;
}
.side-text-inner {
position: absolute;
bottom: 10px;
right: 20px;
transform: translate(-50, -50%);
}
.side-text-inner i {
color: #fff;
font-size: 20px;
}
.side-bx {
position: relative;
}

.side-text-3 {
left: 50%;
}

.side-text-4 {
left: 12%;
}

.side-text-2 {
left: 15%;
}
.side-text-inner2 {
left: 53%;
}
.side-text-inner4 {
left: 53%;
}

#flipbook .odd {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}

.pos-rel {
position: relative;
}
.pin-img {
position: absolute;
right: -45px;
bottom: 60px;
}

.instructions-area .container {
max-width: 860px;
}

.instruction-label h3 {
color: #fff;
font-family: GalanoBold;
margin-bottom: 0px;
font-size: 28px;
}

.side-bx:hover .side-text h3,
.side-bx:hover .side-text-inner a i {
background: -webkit-linear-gradient(
0deg,
#02bcdd 0%,
#06d1e5 22.09%,
#64eda8 51.94%,
#d0f88d 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* linear-gradient(90deg, #02BCDD 0%, #06D1E5 22.09%, #64EDA8 51.94%, #D0F88D 100%); */
}
.z-ind-3 .side-bx {
position: relative;
/* z-index: 1000 !important; */
}

.copyright {
position: absolute;
bottom: -5px;
left: 50%;
transform: translate(-50%, 0%);
}

.copyright p {
color: #fff;
margin-bottom: 25px;
font-family: Galano, Arial, sans-serif;
font-size: 14px;
letter-spacing: 1px;
white-space: nowrap;
}

.gradient {
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
}

.gradient:hover {
background: linear-gradient(
90deg,
#02BCDD 0%,
#06D1E5 20.71%,
#64EDA8 48.26%,
#D0F88D 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.pt-50 {
padding-top: 0px;
}

.mob-img-bx {
width: 100%;
height: 100vh;
}

.mob-img-bx img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Desktop only */
@media (min-width: 1025px) {
.flipbook {
width: 850px !important;
height: 430px !important;
margin: 76px auto !important;
transform: scale(0.95);
transform-origin: center center;
}

.flipbook .page-wrapper,
.flipbook .page,
.flipbook .hard {
width: 425px !important;
height: 430px !important;
}
}

.more-inspirations-page {
width: 100%;
height: 100%;
}

.desktop-inspirations {
display: block;
height: 100%;
padding-left: 1.5rem;
}

.more-inspirations-inner {
display: none;
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
padding: min(5%, 24px);
}

.more-inspirations-inner h2 {
margin: 0;
color: #ffffff;
font-family: GalanoBold;
font-size: 20px;
text-align: center;
letter-spacing: 0;
white-space: nowrap;
}

.more-inspirations-divider {
display: block;
width: 100%;
height: 1px;
max-width: 350px;
margin: min(3.5%, 14px) 0 min(5%, 20px);
background: linear-gradient(90deg, rgba(2, 188, 221, 0), #02bcdd 16%, #64eda8 54%, #d0f88d 84%, rgba(208, 248, 141, 0));
opacity: 0.9;
}

.more-inspirations-grid {
display: grid;
width: min(100%, 280px);
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: min(4%, 16px) min(5%, 18px);
}

.inspiration-card {
position: relative;
display: flex;
min-height: 76px;
align-items: center;
justify-content: center;
padding: 14px 28px 18px 14px;
border: 1px solid rgba(0, 0, 0, 0.22);
border-radius: 8px;
background: #022840;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.28), 0 7px 14px rgba(0, 0, 0, 0.18);
color: #ffffff;
font-family: GalanoBold, GalanoGrotesqueMedium, sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1.12;
text-align: center;
text-decoration: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.inspiration-card span,
.inspiration-card i {
transition: color 0.2s ease;
}

.inspiration-card i {
position: absolute;
right: 10px;
bottom: 9px;
font-size: 16px;
}

.inspiration-card:hover,
.inspiration-card:focus-visible {
border-color: rgba(100, 237, 168, 0.35);
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.28), 0 9px 18px rgba(0, 0, 0, 0.24);
transform: translateY(-2px);
}

.inspiration-card:hover span,
.inspiration-card:hover i,
.inspiration-card:focus-visible span,
.inspiration-card:focus-visible i {
background: linear-gradient(90deg, #02bcdd 0%, #06d1e5 22.09%, #64eda8 51.94%, #d0f88d 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}

#header-placeholder {
position: relative;
z-index: 120;
}

.site-header {
position: absolute;
top: 24px;
left: 0;
z-index: 1000;
display: flex;
width: 100%;
height: 70px;
align-items: center;
justify-content: center;
pointer-events: none;
}

.site-logo {
pointer-events: auto;
}

.site-logo img {
display: block;
width: 250px;
height: auto;
}

.menu-toggle {
display: none;
width: 28px;
height: 28px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
border: 0;
background: transparent;
}

.menu-toggle span {
display: block;
width: 22px;
height: 2px;
border-radius: 10px;
background: #ffffff;
}

.mobile-menu {
display: none;
}

.mobile-story,
.mobile-book-back,
.mobile-book-controls {
display: none;
}

@media (max-width: 767.98px) {
html,
body {
height: 100%;
overflow: hidden !important;
background: #021d31;
}

.header {
display: none;
}

.desktop-inspirations {
display: none;
}

.more-inspirations-inner {
display: flex;
}

.site-header {
position: fixed;
top: 0;
height: 56px;
justify-content: space-between;
padding: 0 22px;
background: #02253d;
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
pointer-events: auto;
}

.site-logo img {
width: 156px;
}

.menu-toggle {
display: flex;
}

.mobile-story {
display: block !important;
width: 100%;
height: 100vh;
height: 100svh;
background: #02253d;
}

body.mobile-story-active .mobile-story.d-lg-none {
display: block !important;
}

.mobile-story-panel {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100svh;
padding-top: 56px;
overflow: hidden;
}

body.mobile-story-active .story-book-shell.d-lg-block {
display: none !important;
}

.mobile-book-back,
.mobile-book-controls button {
appearance: none;
border: 0;
background: transparent;
color: #ffffff;
line-height: 1;
}

.mobile-story-cover {
align-items: center;
/*background: linear-gradient(90deg, #02bcdd 0%, #06d1e5 22.09%, #64eda8 51.94%, #d0f88d 100%);*/
}

.mobile-story-cover-art {
position: absolute;
inset: 56px 0 24px;
width: 100%;
height: calc(100svh - 80px);
object-fit: cover;
/*object-position: center top;*/
}

.mobile-open-book {
position: absolute;
left: 50%;
bottom: clamp(64px, 14svh, 92px);
z-index: 2;
transform: translateX(-50%);
min-width: 176px;
min-height: 46px;
padding: 10px 22px;
border: 0;
border-radius: 999px;
background: #02253d;
color: #2be4e9;
font-family: "Gaegu", cursive;
font-size: 22px;
box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22);
white-space: nowrap;
}


.mobile-story-copyright {
position: absolute;
left: 0;
right: 0;
bottom: 0; 
z-index: 2;
margin: 0;
background: #02253d;;
height: 45px;
font-family: GalanoGrotesqueMedium, sans-serif;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}

.mobile-story-rotate {
display: none;
background: linear-gradient(180deg, #02253d 0%, #001727 100%);
color: #ffffff;
}

.mobile-rotate-content {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 22px;
text-align: center;
}

.mobile-rotate-content > img {
width: min(108px, 27vw);
height: auto;
margin-bottom: 24px;
}

.mobile-rotate-content h1 {
margin: 0;
background: linear-gradient(90deg, #02BCDD 0%, #06D1E5 20.71%, #64EDA8 48.26%, #D0F88D 100%);
-webkit-text-fill-color: transparent;
background-clip: text;
-webkit-background-clip: text;
/*color: #18dce8;*/
font-family: GalanoBold;
font-size: clamp(30px, 8vw, 40px);
line-height: 1;
text-transform: uppercase;
}

.mobile-rotate-phone {
margin: 2px 0 44px;
font-family: GalanoGrotesqueMedium, sans-serif;
font-size: clamp(20px, 5.4vw, 28px);
line-height: 1.1;
}

.mobile-rotate-copy,
.mobile-book-note {
margin: 0;
font-family: GalanoGrotesqueMedium, sans-serif;
font-size: 14px;
line-height: 1.5;
}

.mobile-rotate-copy {
margin-bottom: 36px;
}

.mobile-open-book-icon {
display: grid;
place-items: center;
width: 42px;
height: 42px;
margin-bottom: 12px;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 50%;
}

.mobile-open-book-icon img {
width: 21px;
height: auto;
}

.mobile-book-note {
font-size: 16px;
color: rgba(255, 255, 255, 0.86);
}

body.mobile-story-opened .mobile-story-cover {
display: none;
}

body.mobile-story-opened .mobile-story-rotate {
display: flex;
}

body.mobile-story-opened.mobile-story-landscape .mobile-story {
display: none !important;
}

body.mobile-story-opened.mobile-story-landscape .story-book-shell.d-none {
display: block !important;
}

body.mobile-story-opened.mobile-story-landscape .flipbook-viewport {
height: 100vh;
height: 100svh;
padding: 56px 4px 28px;
background-color: #000000;
background-image: url("https://ismokestack.com/about/startup-story/Images/our-story-mobile-background.webp");
background-repeat: no-repeat;
background-position: center 70%;
background-size: cover;
overflow: hidden;
}

/*body.mobile-story-opened.mobile-story-landscape .instructions-area,*/
body.mobile-story-opened.mobile-story-landscape .floating-home,
body.mobile-story-opened.mobile-story-landscape .floating-home-2,
body.mobile-story-opened.mobile-story-landscape .copyright {
display: none;
}

.pin-img {
  display: none;
}

body.mobile-story-opened.mobile-story-landscape .flipbook-viewport .container-1 {
top: calc(50% + 14px);
left: 50%;
}

/*body.mobile-story-opened.mobile-story-landscape .flipbook-viewport .flipbook {*/
/*box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);*/
/*}*/

body.mobile-story-opened.mobile-story-landscape .mobile-book-back,
body.mobile-story-opened.mobile-story-landscape .mobile-book-controls {
display: flex;
}

.mobile-book-back {
position: fixed;
top: 15px;
left: 12px;
z-index: 999;
align-items: center;
justify-content: center;
min-width: auto;
height: 20px;
padding: 0 8px;
font-family: GalanoGrotesqueMedium, sans-serif;
font-size: 10px;
text-transform: uppercase;
text-align: left;
background: rgba(0, 0, 0, 0.72);
}

.mobile-book-back span {
font-size: 15px;
vertical-align: -2px;
margin-top: -3px;
margin-right: 3px;
}

.mobile-book-controls {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 110;
align-items: center;
justify-content: center;
gap: 24px;
height: 14px;
background: #000000;
color: #ffffff;
font-family: GalanoGrotesqueMedium, sans-serif;
font-size: 8px;
letter-spacing: 0;
text-transform: uppercase;
padding-top: 1px;
}

.mobile-book-controls button {
display: grid;
place-items: center;
width: 30px;
height: 24px;
font-size: 9px;
}
}

@media (max-width: 767.98px) and (orientation: landscape) {
body.mobile-story-active:not(.mobile-story-opened) .mobile-story-cover {
width: 100%;
}

body.mobile-story-opened.mobile-story-landscape .flipbook-viewport {
border-radius: 0;
}
}

/* instruction area ends */

@media (max-width: 767.98px) and (orientation: landscape) {
  .site-header {
    height: 40px !important;
    padding: 0 15px !important;
    background: #000 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .site-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .site-logo img {
    height: 30px !important;
    width: auto;
  }
  
      .site-logo img {
        width: 140px !important;
    }

  .menu-toggle {
    margin-left: auto;
  }

  .mobile-menu {
    top: 55px !important;
    max-height: calc(100vh - 55px);
    overflow-y: auto;
    z-index: 999 !important;
    background: #000 !important;
  }

  .mobile-menu__content {
   margin: 5px auto 0 !important; 
    padding: 1rem 1.5rem !important;
  }

  .mobile-menu__eyebrow {
    font-size: 0.85rem !important;
  }

  .mobile-menu__handle {
    font-size: 0.8rem !important;
  }

  .mobile-menu a {
    font-size: 12px !important;
  }
  
  .mobile-menu i {
    width: 12px;
    color: #fff;
    font-size: 12px !important;
    text-align: center;
    transition: color 0.2s ease;
    margin-top: 0px !important;
    padding-top: 0px !important;
    }
    
    .menu-toggle span {
        display: block;
        width: 20px !important;
        height: 3px;
        border-radius: 10px;
        background: #fff;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }
    
        .mobile-menu {
        position: fixed;
        inset: 40px 0 10px !important;
        z-index: 900;
        display: block;
        visibility: hidden;
        background: var(--navy);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }
}

@media (min-width: 768px) {
  .story-book-shell,
  .story-book-shell.d-lg-block,
  .story-book-shell.d-md-block {
    display: block !important;
  }
  .mobile-story,
  .mobile-story.d-md-none,
  .mobile-story.d-lg-none {
    display: none !important;
  }
  body.mobile-story-active .mobile-story,
  body.mobile-story-opened .mobile-story {
    display: none !important;
  }
  body.mobile-story-active .story-book-shell,
  body.mobile-story-opened .story-book-shell {
    display: block !important;
  }
}

.rotate-icon {
    animation: rotatePhone 2s linear infinite;
    transform-origin: center;
}

@keyframes rotatePhone {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(90deg);
    }
    75% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* iPad Mini Portrait */
@media only screen
and (width: 768px)
and (height: 1024px)
and (orientation: portrait) {

    .side-text h3 {
        color: #fff;
        font-family: "GalanoGrotesqueMedium", sans-serif;
        font-size: 15px;
        font-weight: 700 !important;
    }

    .side-text-4 {
        left: 12%;
    }

    .side-text-2 {
        left: 13%;
    }

}