/* @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: GalanoBold;
src: url("GalanoGrotesqueDEMO-Bold.otf");
}
/* @font-face {
font-family: galanoFont;
src: url(GalanoGrotesqueMedium1.otf);
} */
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

body {
background-color: #f9f9f9;
}
html,
body {
/* height: 100%; */
width: 100%;
overflow-x: hidden !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-color: white;
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: 20px;
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: 18%;
}

.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: -30px;
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 {
transition: all ease-in-out 3s;
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 a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

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

.copyright p {
color: #fff;
font-family: GalanoGrotesqueMedium, Sans-serif;
margin-bottom: 8px;
/* font-family: "Galano Medium", Sans-serif; */
font-size: 14px;
}

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

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


.flipbook {
    width: 850px !important;
    height: 480px !important;
    margin: 60px auto !important;
    transform: scale(0.88);
    transform-origin: center center;
}

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


/* instruction area ends */