/*
Theme Name: GardenArt
Theme URI: https://example.com/gardenart
Author: Mohsen Moridi
Author URI: https://example.com
Description: A minimal WordPress theme for gardens and art enthusiasts.
Version: 1.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gardenart
*/


@font-face {
    font-family: 'LuckiestGuy';
    src: url('fonts/LuckiestGuy-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PatrickHand';
    src: url('fonts/PatrickHand-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gothic';
    src: url('fonts/gothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'richela';
    src: url('fonts/richela-kids.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}




.step p {
    font-family: LuckiestGuy;
    margin: 0;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.custom_texts
body {
    font-family: Gothic, cursive;
    margin: 0;
    padding: 0;
    background: #ffffff;
    color: #333;
    min-height: 100%;
    font-size: 18px;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Apply Dekko for headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'LuckiestGuy';
    font-weight: normal;
}

/* Apply Delius for body text */
body,
p,
a,
span {
}


.main-logo {
    background: url(img/logo.jpg) center;
    color: #ffffff00;
    aspect-ratio: 2;
    width: 203px;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    text-indent: -99999px;
    margin: 32px auto;
}


#character-preview {
    position: relative;
    /* width: 300px; */
    /* height: 400px; */
    /* bottom: 0; */
}

#character-preview img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.option-group {
    margin-bottom: 10px;
}

.option-group label {
    display: block;
}

.gender-button.active {
    font-weight: bold;
    /* background-color: #b9357e; */
    /* border: 1px solid #c2cffd; */
}

div#character-customization {
    display: flex;
    width: 100%;
    /* max-width: 900px; */
    margin: 32px auto;
    align-items: center;
}

form#customization-form {
    /* width: 149%; */
    /* background: radial-gradient(#ffffff, #e0efdb); */
    /* padding: 22px 35px; */
    display: flex;
    /* border-radius: 62px; */
    /* flex-direction: column; */
    /* gap: 20px; */
    /* font-weight: 900; */
}

div#character-preview {
    width: 100%;
}

.option-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    border-bottom: 2px solid #eaf4e6;
    padding-bottom: 11px;
}


h1.main-logo {}

div#character-top {
    /* display: flex; */
    width: 100%;
    max-width: 900px;
    margin: auto;
    text-align: center;
}

button {
    /* background: #fff; */
    /* border: 1px solid #cfcfcf; */
    /* padding: 5px 11px; */
    /* border-radius: 13px; */
    /* font-family: 'Delius', cursive; */
    /* cursor: pointer; */
    /* font-size: 18px; */
}

.inputs-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.inputs-group label {
    background: #fff;
    padding: 3px;
    border-radius: 10px;
    width: 41px;
    text-align: center;
    color: #00000000;
    /* border: 4px solid #e1edde; */
    cursor: pointer;
    font-size: 0;
    height: 35px;
    position: relative;
    transition: 0.2s all;
    /* overflow: hidden; */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px #a3a3a369;
}

.inputs-group input:checked+label {
    /* border: 4px solid #ffffff00; */
    /* box-shadow: 0px 4px 0px #7d9d7340; */
    /* top: -2px; */
    /* padding-bottom: 9px; */
    transform: scale(1.1);
    box-shadow: 0 9px 10px #a3a3a369;
}

.inputs-group input {
    display: none;
}


label#label-skin-1 {
    background: #f7d8c1;
}

label#label-skin-2 {
    background: #f0bf9d;
}

label#label-skin-3 {
    background: #d4a984;
}

label#label-skin-4 {
    background: #af8265;
}

label#label-skin-5 {
    background: #7a5240;
}


label#label-eye-1 {
    background: #5daed6;
}


label#label-eye-2 {
    background: #c3dc5b;
}


label#label-eye-3 {
    background: #de8c68;
}

label#label-eye-4 {
    background: #a8684d;
}

label#label-eye-5 {
    background: #9e9e9e;
}


label#label-eye-6 {
    background: #444444;
}

label#label-hair-color-1 {
    background: #eedcc4;
}

label#label-hair-color-2 {
    background: #f9cc89;
}

label#label-hair-color-3 {
    background: #f18953;
}

label#label-hair-color-4 {
    background: #d99e6d;
}

label#label-hair-color-5 {
    background: #bf7a58;
}

label#label-hair-color-6 {
    background: #a95746;
}

label#label-hair-color-7 {
    background: #814f31;
}

label#label-hair-color-8 {
    background: #444444;
}



.inputs-group label:before {
    /* content: ''; */
    position: absolute;
    left: 0px;
    right: 0;
    top: -10px;
    bottom: -10px;
    /* background: linear-gradient(179deg, #000000, #ffffff); */
    mix-blend-mode: soft-light;
    border-radius: 8px;
    transition: 0.25s all;
}

.inputs-group input:checked+label:before {
    transform: rotate(80deg);
}


.checkbox-group label {
    font-size: 15px;
    color: #000;
    display: flex;
    width: unset;
    align-items: center;
    gap: 5px;
    box-shadow: unset !important;
    !i;
    !;
    background: unset !important;
    !i;
    !;
    border: unset;
    transition: unset;
    padding-bottom: unset !important;
    !i;
    !;
    position: unset !important;
    !i;
    !;
}

.checkbox-group label:before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    position: unset;
    border: 2px solid #ffffff;
    mix-blend-mode: unset;
    transform: unset !important;
    !i;
    !;
    background: #fff;
    outline: 2px solid #bbd49f;
}

.checkbox-group input:checked+label:before {
    background: #61a91d;
}

footer {
    text-align: center;
    opacity: 0.3;
    margin-top: 70px;
}

div#character-preview:before {
    content: '';
    display: block;
    padding-bottom: 120%;
}

div#character-preview svg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    object-fit: contain;
    z-index: -2;
    width: 100%;
    opacity: 0.4;
    pointer-events: none;
}

div#character-preview img {
    height: 100%;
    object-fit: cover;
}

.hair-style-options .input-group label {
    font-size: 15px;
    color: #acb5aab5;
}

.hair-style-options .input-group input:checked+label {size: 14px;color: #ffffff00;background: #b9357e;}

.input-group {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}


input#name {
    /* position: absolute; */
    /* top: -32px; */
    /* left: 50px; */
    /* right: 50px; */
    /* z-index: 100; */
    font-size: 24px;
    border: 2px solid #eee;
    padding: 16px;
    text-align: left;
    border-radius: 16px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}


.top-header {
    background: url(img/UI-2.webp);
    max-width: 1920px;
    width: 100%;
    aspect-ratio: 5.2;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: auto;
}

header {
    background: #b9357e;
}






.form-step .section-in {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 20px 0;
    width: 100%;
}

.form-step.active {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-container {
    max-width: 1200px;
    margin: 0px auto;
    /* padding: 20px; */
    /* border: 1px solid #ddd; */
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding-bottom: 400px;
}

.radio-group {
    margin: 15px 0;
    display: flex;
    gap: 17px;
    margin: 32px 0;
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    /* width: 100%; */
}



button {
    margin-top: 10px;
    padding: 10px 20px;
    border: none;
    background-color: #b9367f;
    color: white;
    border-radius: 55px;
    cursor: pointer;
    font-size: 22px;
    transition: 0.4s;
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

footer {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    background-color: #f4f4f4;
    display: none;
}


.step-guide {
    text-align: center;
    padding: 50px 20px;
    background-color: #fff;
}

.step-guide h2 {
    font-size: 28px;
    color: #b9357e;
    font-weight: normal;
    margin-bottom: 20px;
    FONT-FAMILY: 'LuckiestGuy';
}

.steps {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 126px;
    aspect-ratio: 1;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    padding: 10px;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
    top: 0px;
    justify-content: center;
}

.step:hover {
    top: -10px;
}

.step:nth-child(1) {
    background-color: #e8681a;
}

.step:nth-child(1):hover {
    box-shadow: 0px 4px 28px #e8681aaa;
}

.step:nth-child(2) {
    background-color: #eab808;
}
.step:nth-child(2):hover {
    box-shadow: 0px 4px 28px #eab808aa;
}

.step:nth-child(3) {
    background-color: #93b13d;
}
.step:nth-child(3):hover {
    box-shadow: 0px 4px 28px #93b13daa;
}

.step:nth-child(4) {
    background-color: #2aa4a4;
}

.step:nth-child(54):hover {
    box-shadow: 0px 4px 28px #2aa4a4aa;
}
.step:nth-child(5) {
    background-color: #3d6dc8;
}
.step:nth-child(5):hover {
    box-shadow: 0px 4px 28px #3d6dc8aa;
}

.step:nth-child(6) {
    background-color: #7a3eb1;
}
.step:nth-child(6):hover {
    box-shadow: 0px 4px 28px #7a3eb1aa;
}

.step:nth-child(7) {
    background-color: #c9387c;
}
.step:nth-child(7):hover {
    box-shadow: 0px 4px 28px #c9387caa;
}

.step span {
    font-size: 40px;
    font-family: 'LuckiestGuy';
}

.description {
    margin-top: 20px;
    font-size: 16px;
    color: #666;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

h3.step-title {
    color: #c7c7c7;
    text-align: center;
    font-size: 34px;
    box-shadow: inset 0 0 10px #b2b5bb;
    display: flex;
    justify-content: space-between;
    height: 70px;
    align-items: center;
    background: #fafafa;
    width: 100%;
    margin: 0;
}

h3.step-title:before {
    content: '';
    height: 100%;
    display: block;
    width: 20%;
    background: linear-gradient(270deg, #ffffff00, #ffffff);
}

h3.step-title:after {
    content: '';
    display: block;
    width: 20%;
    background: linear-gradient(90deg, #ffffff00, #ffffff);
    height: 100%;
}

.radio-group input {
    display: none;
}

.radio-group img {
    max-height: 186px;
    cursor: pointer;
    border-radius: 4px 14px 14px 4px;
    box-shadow: 0 10px 10px #dddddd;
    transition: 0.3s;
}

.radio-group input:checked+img,
.radio-group label:hover img {
    /* transform: scale(1.1) translateY(-6px); */
    /* box-shadow: 0 21px 30px #0000004a; */
}

.input-radio-card {
    /* width: 250px; */
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 10px 10px #dddddd;
    transition: 0.3s;
}


svg.checkmark-radio {
    width: 42px;
    position: absolute;
    right: 24px;
    top: -10px;
    opacity:0;
    transition:.3s;
    transform: translateZ(10px);
}

input:checked + .input-radio-card svg.checkmark-radio {
    width: 42px;
    position: absolute;
    right: 24px;
    top: 2px;    
    opacity:1
}

.st0 {
    fill: #ffffff;
  }

  .st1 {
    fill: #00ed4f;
  }

input:checked+.input-radio-card ,label:hover .input-radio-card {
    transform: scale(1.1) translateY(-6px);
    box-shadow: 0 21px 30px #0000004a;
}



.input-radio-card img {
    width: 100%;
    display: block;
    /* border-radius: 12px 18px 27px 13px; */
    /* padding: 10px; */
    box-sizing: border-box;
    object-fit: cover;
}

.input-radio-card .details {
    padding: 0 16px 16px;
}

.input-radio-card .details h2 {
    font-size: 1.2rem;
    margin: 8px 0;
    color: #ee8000;
}

.input-radio-card .details p {
    margin: 4px 0;
    font-size: 0.9rem;
    /* color: #1d98bb; */
    text-align: left;
}

.input-radio-card .details p span {
    /* font-weight: bold; */
    font-family: 'LuckiestGuy';
    font-weight: normal;
    color: #1d98bb;
}

.stars {
    margin-top: 8px;
}

.stars span {
    color: #ffcc00;
    font-size: 1.2rem;
}




#page-turn-container .page {
    background-color: #f9f9f9;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}



div#page-turn-container {
    margin-top: 32px;
    margin-bottom: 32px;
}



textarea#personal_massage {
    font-family: 'Gothic';
    font-size: 26px;
    text-align: center;
    height: 201px !important;
    border-radius: 60px;
    border: dashed 4px;
    outline: 10px solid #fff;
    box-shadow: 0 0 20px 10px #0000005e;
    margin: 39px;
    padding: 14px;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    max-width: 570px;
}



.radio-group.radio-book img {
    box-shadow: unset;
    border-radius: unset;
    /* padding: 9px; */
    object-fit: unset;
    aspect-ratio: unset;
    height: unset;
    max-height: max-content;
    width: 100%;
    border-radius: 0 20px 20px 0;
}

div#page-turn-container img {
    width: 100%;
}

.shadow {
    box-shadow: rgb(45 64 70 / 27%) 0px 29px 100px;
}


.inputs-group label:after {
    content: '';
    display: block;
    width: 13px;
    height: 7px;
    border-left: 5px solid #ffffff;
    border-bottom: 5px solid #ffffff;
    position: absolute;
    transform: rotate(-45deg);
    /* position: absolute; */
    right: 15px;
    bottom: 17px;
    z-index: 1000;
    /* transform: translateZ(92px); */
    opacity: 0;
    transition: 0.3s all;
}

.inputs-group input:checked + label:after {
    /* opacity: 1; */
}

button.gender-button:before {
    content: '';
    display: block;
    width: 13px;
    height: 7px;
    border-left: 5px solid #4CAF50;
    border-bottom: 5px solid #4CAF50;
    /* position: absolute; */
    transform: rotate(-45deg);
    position: relative;
    bottom: 3px;
    z-index: 1000;
    /* transform: translateZ(92px); */
    opacity: 0;
    transition: 0.3s all;
    width: 0;
}

button.gender-button {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-right: 38px;
    background: #ffffff;
    font-family: 'LuckiestGuy';
    box-shadow: 0 0 10px #d0d0d0;
    font-weight: 100 !important;!i;!;
}

button.gender-button.active:before {
    opacity: 1;
    width: 12px;
}

.option-group > label {box-shadow: 0 0 10px #cdcdcd;padding: 8px;border-radius: 10px;font-family: 'LuckiestGuy';font-weight: 100;color: #5a2a78;}

button.gender-button[data-gender="boy"] {
    color: #006ed5;
}

button.gender-button[data-gender="girl"] {
    color: #d500d8;
}

form.post-password-form {
    max-width: 400px;
    margin: auto;
    text-align: center;
    font-size: 24px;
}

.radio-group.radio-age img {
    width: 180px;
    height: 151px;
    object-fit: cover;
}

.char-left ,.char-center ,.char-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 26px;
}

.form-step.active  .section-in {
    display: flex;
}

.form-step.active h3.step-title {
    color: #b9357e;
}

.hair-style-options .input-group label img {
    width: 100%;
}

.inputs-group input:checked + label img {
    filter: invert(1);
}


.book_page img {
    position: absolute;
}

.radio-age label {
    font-family: LuckiestGuy;
    width: 100%;
    background: linear-gradient(45deg, #f09100, #f07400);
    border-radius: 11px;
    /* aspect-ratio: 1.3; */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 6px;
    font-size: 20px;
    transition: 0.3s all;
    top: 0;
    position: relative;
    cursor: pointer;
    box-shadow: 0px 4px 7px #0000002e;
    width: 150px;
    height: 40px;
}


.radio-age label:nth-child(2) {
    background: linear-gradient(45deg, #fe2a12, #d31803);
}

.radio-age label:nth-child(3) {
    background: linear-gradient(45deg, #81ca00, #69a007);
}

.radio-age label div {
    /* max-width: 461px; */
    text-align: center;
}

.radio-age input + :before {
    content:'';
    display:block;
    width: 14px;
    height: 7px;
    position:absolute;
    left:10px;
    top:-10px;
    opacity:0;
    border-bottom: 6px solid #fff;
    border-left: 6px solid #fff;
    transform: rotate(-45deg);
    transition: 0.3s;
}
.radio-age input:checked + :before {
    opacity:1;
    top: 16px;
}

.radio-age label:hover {
    top: -10px;
}

.radio-age label:hover {
    box-shadow: 0px 4px 28px #f09100;
}


.radio-age label:nth-child(2):hover {
    box-shadow: 0px 4px 28px #fe2a12;
}

.radio-age label:nth-child(3):hover {
    box-shadow: 0px 4px 28px #82bc4d;
}

label.book:hover {
    /* border: 1px solid #d9d9d9; */
    /* padding: 15px; */
    border-radius: 14px;
    box-shadow: -3px -1px 28px rgb(0 0 0 / 40%);
    top: -20px;
    /* z-index: 99999; */
    transform: scale(1.1);
}

div#books {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
    display: grid;
}

label.book strong {
    font-family: 'LuckiestGuy';
    font-weight: normal;
    color: #1d98bb;
}

label.book {
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    /* display: flex; */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: 0.3s all;
    padding: 15px;
    border-radius: 14px;
    position: relative;
    top: 0;
    background: #fff;
}

label.book p img {
    width: 100px !important;
    float: right;
    margin-top: 2px;
}


input:checked + label.book {
    border-color:red
}

label.book:before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    left: 10px;
    top: -10px;
    opacity: 0;
    /* transform: rotate(-45deg); */
    transition: 0.3s;
    z-index: 999;
    background: #ffffff url(img/check.svg) center no-repeat;
    border-radius: 50px;
    background-size: 24px;
    border: 2px solid #4caf50;
}



input:checked + label.book:before {
    top: 8px;
    opacity: 1;
}

label.book p {
    margin: 11px 0 0;
}

.gf-options img {
    width: 100%;
    border-radius: 13px;
}

.gf-options input:checked + label img {
    filter: invert(0);
    border: 3px solid #b9367f;
}

.gf-options label {padding: 0;}

.gf-options label img {
    border: 3px solid #fff;
}

.gf-options .radio-group {
    display: flex;
    flex-wrap: wrap;
    width: 141px;
    justify-content: center;
}

.gf-options .radio-group h3 {
    width: 100%;
    margin: 0;
    text-align: center;
}

.inputs-group.gf-options {
    flex-wrap: nowrap;
    display: flex;
    justify-content: center;
}




 /* Modal styles */
 .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.76);
    overflow: auto;
}

.modal-content {
    position: relative;
    margin: auto;
    padding: 20px;
    width: 80%;
    max-width: 500px;
    text-align: center;
    animation: modalZoom 0.5s ease-out;
}

.boom-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    animation: imageZoom 1s ease-in-out;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

@keyframes modalZoom {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes imageZoom {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Page navigation styles */
.page-navigation {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 20px;
}

.page-nav-btn {
    padding: 10px 20px;
    background-color: #ad377a;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
    position: absolute;
    /* right: 0; */
    top: calc(50% - 20px);
    position: absolute;
    left: -20px;
    top: calc(50% - 20px);
    display: flex;
    border-radius: 100px;
}

.page-nav-btn:hover {
    background-color: #b2367c;
}

.page-nav-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.section-in-book {
    position: relative;
}

button#next-page {
    left: unset;
    right: -20px;
}

.section-in-book {
    max-width: 1200px;
}



.book_2  div#book_page_3 .custom_texts {
    position: absolute;
    left: 34.5%;
    top: 38%;
    font-family: 'richela';
    color: #651f7e;
    width: 29%;
    text-align: center;
    font-size: 25px;
}

.book_2 div#book_page_4 .custom_texts {
    position: absolute;
    left: 13.7%;
    top: 12.9%;
    font-family: 'richela';
    color: #550973;
    font-size: 30px;
}

.book_2 div#book_page_6 .custom_texts {
    position: absolute;
    left: 58.5%;
    top: 27.1%;
    font-family: 'richela';
    color: #9004bb;
    font-size: 24px;
}

.book_2 div#book_page_14 .custom_texts {
    position: absolute;
    left: 48.7%;
    top: 17.9%;
    font-family: 'richela';
    color: #3257d0;
    width: 25%;
    text-align: center;
    font-size: 29px;
}


.book_2 div#book_page_10 .custom_texts {
    position: absolute;
    left: 50.3%;
    top: 22.9%;
    font-family: 'richela';
    color: #077abc;
    width: 43%;
    text-align: center;
    font-size: 24px;
}


.book_2 div#book_page_1 .custom_texts {
    position: absolute;
    left: 2.5%;
    top: 71%;
    font-family: 'richela';
    color: #fc8700;
    width: 21%;
    text-align: right;
    font-size: 24px;
}

.book_2 div#book_page_9 .custom_texts {
    position: absolute;
    left: 17.2%;
    top: 81.2%;
    font-family: 'richela';
    color: #b500cb;
    font-size: 22px;
    text-align: center;
}

.book_2 div#book_page_12 .custom_texts {
    position: absolute;
    left: 47.9%;
    top: 19%;
    font-family: 'richela';
    color: #672885;
    text-align: center;
    font-size: 25px;
}

.book_2 div#book_page_16 .custom_texts {
    position: absolute;
    left: 16.7%;
    top: 72.9%;
    font-family: 'richela';
    color: #940283;
    /* width: 25%; */
    /* text-align: center; */
    transform: rotate(-90deg);
    font-size: 20px;
}

.book_2 div#book_page_19 .custom_texts {
    position: absolute;
    left: 11%;
    top: 75.9%;
    font-family: 'richela';
    color: #940283;
    font-size: 20px;
}

.book_2 div#book_page_20 .custom_texts {
    position: absolute;
    left: 55%;
    top: 27.9%;
    font-family: 'richela';
    color: #8e00bc;
    font-size: 24px;
}


.book_2 div#book_page_23 .custom_texts {
    position: absolute;
    left: 22%;
    top: 16.9%;
    font-family: 'richela';
    color: #940283;
    font-size: 20px;
    text-align: center;
}





























.book_1  div#book_page_3 .custom_texts {
    position: absolute;
    left: 34.5%;
    top: 38%;
    font-family: 'richela';
    color: #651f7e;
    width: 29%;
    text-align: center;
    font-size: 25px;
}

.book_1 div#book_page_4 .custom_texts {
    position: absolute;
    left: 39.7%;
    top: 60.9%;
    font-family: 'richela';
    color: #550973;
    font-size: 30px;
    text-align: center;
}

.book_1 div#book_page_6 .custom_texts {
    position: absolute;
    left: 33.5%;
    top: 17.1%;
    font-family: 'richela';
    color: #9004bb;
    font-size: 24px;
    text-align: center;
}



.book_1 div#book_page_11 .custom_texts {
    position: absolute;
    left: 26.3%;
    top: 68.9%;
    font-family: 'richela';
    color: #a70b64;
    width: 43%;
    text-align: center;
    font-size: 24px;
}


.book_1 div#book_page_1 .custom_texts {
    position: absolute;
    left: 40.5%;
    top: 12%;
    font-family: 'richela';
    color: #ffffff;
    width: 21%;
    text-align: center;
    font-size: 27px;
}

.book_1 div#book_page_8 .custom_texts {
    position: absolute;
    left: 58.2%;
    top: 18.2%;
    font-family: 'richela';
    color: #b500cb;
    font-size: 24px;
    text-align: center;
}

.book_1 div#book_page_13 .custom_texts {
    position: absolute;
    left: 31.9%;
    top: 29%;
    font-family: 'richela';
    color: #672885;
    text-align: center;
    font-size: 25px;
}

.book_1 div#book_page_17 .custom_texts {
    position: absolute;
    left: 22.7%;
    top: 22.9%;
    font-family: 'richela';
    color: #ffffff;
    /* width: 25%; */
    text-align: center;
    /* transform: rotate(-90deg); */
    font-size: 29px;
}

.book_1 div#book_page_19 .custom_texts {
    position: absolute;
    left: 39%;
    top: 37.9%;
    font-family: 'richela';
    color: #940283;
    font-size: 26px;
}

.book_1 div#book_page_21 .custom_texts {
    position: absolute;
    left: 35%;
    top: 22.9%;
    font-family: 'richela';
    color: #8e00bc;
    font-size: 24px;
    text-align: center;
}





.book_3  div#book_page_3 .custom_texts {
    position: absolute;
    left: 34.5%;
    top: 38%;
    font-family: 'richela';
    color: #651f7e;
    width: 29%;
    text-align: center;
    font-size: 25px;
}

.book_3 div#book_page_4 .custom_texts {
    position: absolute;
    left: 57.7%;
    top: 17.9%;
    font-family: 'richela';
    color: #006185;
    font-size: 30px;
    text-align: center;
}

.book_3 div#book_page_6 .custom_texts {
    position: absolute;
    left: 43.5%;
    top: 22.1%;
    font-family: 'richela';
    color: #0039b9;
    font-size: 24px;
    text-align: center;
}



.book_3 div#book_page_10 .custom_texts {
    position: absolute;
    left: 26.3%;
    top: 49.9%;
    font-family: 'richela';
    color: #ffcc00;
    width: 43%;
    text-align: center;
    font-size: 24px;
}


.book_3 div#book_page_1 .custom_texts {
    position: absolute;
    left: 10.5%;
    top: 21%;
    font-family: 'richela';
    color: #b2215b;
    width: 21%;
    text-align: center;
    font-size: 35px;
}

.book_3 div#book_page_9 .custom_texts {
    position: absolute;
    left: 33.2%;
    top: 24.2%;
    font-family: 'richela';
    color: #005c76;
    font-size: 24px;
    text-align: center;
}

.book_3 div#book_page_13 .custom_texts {
    position: absolute;
    left: 31.9%;
    top: 40%;
    font-family: 'richela';
    color: #ffffff;
    text-align: center;
    font-size: 25px;
}

.book_3 div#book_page_17 .custom_texts {
    position: absolute;
    left: 30.7%;
    top: 15.9%;
    font-family: 'richela';
    color: #004e75;
    /* width: 25%; */
    text-align: center;
    /* transform: rotate(-90deg); */
    font-size: 29px;
}

.book_3 div#book_page_19 .custom_texts {
    position: absolute;
    left: 49%;
    top: 54.9%;
    font-family: 'richela';
    color: #ffffff;
    font-size: 26px;
}

.book_3 div#book_page_20 .custom_texts {
    position: absolute;
    left: 43%;
    top: 22.9%;
    font-family: 'richela';
    color: #290f75;
    font-size: 24px;
    text-align: center;
}


.book_3 div#book_page_5 .custom_texts {
    position: absolute;
    left: 25.7%;
    top: 19.9%;
    font-family: 'richela';
    color: #006185;
    font-size: 30px;
    text-align: center;
}

.book_3 div#book_page_14 .custom_texts {
    position: absolute;
    left: 51.9%;
    top: 43%;
    font-family: 'richela';
    color: #02799c;
    text-align: center;
    font-size: 25px;
}








.book_4  div#book_page_3 .custom_texts {
    position: absolute;
    left: 34.5%;
    top: 38%;
    font-family: 'richela';
    color: #651f7e;
    width: 29%;
    text-align: center;
    font-size: 25px;
}

.book_4 div#book_page_4 .custom_texts {
    /* position: absolute; */
    /* left: 57.7%; */
    /* top: 17.9%; */
    /* font-family: 'richela'; */
    /* color: #006185; */
    /* font-size: 30px; */
    /* text-align: center; */
}

.book_4 div#book_page_6 .custom_texts {
    position: absolute;
    left: 26.5%;
    top: 15.1%;
    font-family: 'richela';
    color: #4e2d5f;
    font-size: 24px;
    text-align: right;
}



.book_4 div#book_page_11 .custom_texts {
    position: absolute;
    left: -0.7%;
    top: 15.5%;
    font-family: 'richela';
    color: #4e2d5f;
    width: 43%;
    text-align: right;
    font-size: 24px;
}


.book_4 div#book_page_1 .custom_texts {
    position: absolute;
    left: 33.5%;
    top: 16%;
    font-family: 'richela';
    color: #781479;
    width: 21%;
    text-align: center;
    font-size: 35px;
}

.book_4 div#book_page_8 .custom_texts {
    position: absolute;
    left: 18.2%;
    top: 14.2%;
    font-family: 'richela';
    color: #4e2d5f;
    font-size: 24px;
    text-align: right;
}

.book_4 div#book_page_13 .custom_texts {
    position: absolute;
    left: 51.9%;
    top: 14%;
    font-family: 'richela';
    color: #4e2d5f;
    /* text-align: center; */
    font-size: 25px;
}

.book_4 div#book_page_16 .custom_texts {
    position: absolute;
    left: 13.7%;
    top: 13.9%;
    font-family: 'richela';
    color: #4e2d5f;
    /* width: 25%; */
    text-align: right;
    /* transform: rotate(-90deg); */
    font-size: 29px;
}

.book_4 div#book_page_18 .custom_texts {
    position: absolute;
    left: 22%;
    top: 13.9%;
    font-family: 'richela';
    color: #940283;
    font-size: 27px;
    text-align: right;
}

.book_4 div#book_page_20 .custom_texts {
    position: absolute;
    left: 31%;
    top: 13.9%;
    font-family: 'richela';
    color: #8e00bc;
    font-size: 24px;
    text-align: right;
}


.book_4 div#book_page_5 .custom_texts {
    position: absolute;
    left: 49.7%;
    top: 14.9%;
    font-family: 'richela';
    color: #4e2d5f;
    font-size: 25px;
    text-align: left;
}

.book_4 div#book_page_15 .custom_texts {
    position: absolute;
    left: 18.9%;
    top: 38%;
    font-family: 'richela';
    color: #4e2d5f;
    text-align: center;
    font-size: 25px;
}


.book_3 div#book_page_23 .custom_texts {
    position: absolute;
    left: 39%;
    top: 14.9%;
    font-family: 'richela';
    color: #290f75;
    font-size: 24px;
    text-align: center;
}

.custom_texts {color: #fff;}

.book_4 div#book_page_23 .custom_texts {
    position: absolute;
    left: 25%;
    top: 14.9%;
    font-family: 'richela';
    color: #8e00bc;
    font-size: 28px;
    text-align: right;
}



div#step3 .section-in {
    display: block;
}


div#step1 .section-in {
    display: block;
}

div#step2 .section-in {
    display: block;
}


button#next2 {
    margin: auto;
    display: block;
}


button#next3 {
    margin: auto;
    display: block;
}