/* body {
    font-family: ProximaNova;
    font-weight: 400;
} */


ul {
    padding: 0px;
    margin-bottom: 0px;
}

li {
    list-style: none;
}


/*----checkbox-preview---*/

.toptab-preview h2 {
    font-size: 22px;
    font-weight: 600;
}

.toptab-preview p {
    font-size: 16px;
}

.img-left,
.img-right {
    padding: 0;
}
.add_more_field{
    cursor: pointer;
}
.toptab-preview {
    /* background-color: #f3f3f3; */
    padding: 60px 0 80px;
}

.tab-content img {
    width: 100%;
}

.toptab-preview h2,
.toptab-preview p {
    text-align: center;
    color: #000;
}


/*book style*/
#flipbook {
    width: 1095px;
    height: 431px;
}
#flipbook .page {
    cursor: grabbing;
    width: 300px;
    /* height: 428px !important; */
    background-color: white;
    font-size: 20px;
    text-align: center;
}

#flipbook .page-wrapper {
    -webkit-perspective: 2000px;
    -moz-perspective: 2000px;
    -ms-perspective: 2000px;
    -o-perspective: 2000px;
    perspective: 2000px;
}

#flipbook .hard {
    color: #333;
    -webkit-box-shadow: inset 0 0 5px #666;
    -moz-box-shadow: inset 0 0 5px #666;
    -o-box-shadow: inset 0 0 5px #666;
    -ms-box-shadow: inset 0 0 5px #666;
    box-shadow: inset 0 0 5px #666;
    font-weight: bold;
}

#flipbook .odd {
    background: -webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
    background-image: -webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image: -moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image: -ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image: -o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image: linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    -webkit-box-shadow: inset 0 0 5px #666;
    -moz-box-shadow: inset 0 0 5px #666;
    -o-box-shadow: inset 0 0 5px #666;
    -ms-box-shadow: inset 0 0 5px #666;
    box-shadow: inset 0 0 5px #666;

}

#flipbook .even {
    background: -webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
    background-image: -webkit-linear-gradient(left, #fff 95%, #dadada 100%);
    background-image: -moz-linear-gradient(left, #fff 95%, #dadada 100%);
    background-image: -ms-linear-gradient(left, #fff 95%, #dadada 100%);
    background-image: -o-linear-gradient(left, #fff 95%, #dadada 100%);
    background-image: linear-gradient(left, #fff 95%, #dadada 100%);
    -webkit-box-shadow: inset 0 0 5px #666;
    -moz-box-shadow: inset 0 0 5px #666;
    -o-box-shadow: inset 0 0 5px #666;
    -ms-box-shadow: inset 0 0 5px #666;
    box-shadow: inset 0 0 5px #666;
}

.soft img {
    margin-left: 47%;
    width: 8% !important;
    /* margin-top: 35%; */
    position: absolute;
}



@media (min-width: 768px) and (max-width: 820px) {
    #flipbook {
        height: 270px !important;
    }

    .toptab-preview {
        padding: 0px !important;
    }

    
    .soft canvas {
        width: 100% !important;
        height: 100% !important;
    }

    #flipbook .page {
        height: 270px !important;
    }


    .soft img {
        margin-left: 47% !important;
    }

    .soft img.uploaded-inner-image {
        margin-left: inherit !important;
    }

    .page-wrapper {
        height: 270px !important;
    }


    .soft canvas {
        width: 100% !important;
        height: 100% !important;
    }

}

@media (max-width: 480px) {
    .build-story-start {
        display: block !important;
    }

    .stepwizard-row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .user_selection .selection_options .avtar-wrapper .radio-img-label {
        max-width: calc(50% - (15px * 3/4)) !important;
    }

    .toptab-preview {
        padding: 0px !important;
    }


    .loader,
    .cartloader {
        width: 60px !important;
        height: 60px !important;
    }

    .stepwizard-step p small {
        font-size: 10px !important;
    }

    .hard.page.p1.odd {
        width: 191.5px !important;
    }

    .soft canvas {
        width: 191.5px !important;
        height: 148px !important;
    }

    .soft img {
        margin-left: 0% !important;
    }


    .soft img {
        margin-left: 47% !important;
    }

    .soft img.uploaded-inner-image {
        margin-left: inherit !important;
    }

    .soft canvas {
        width: 100% !important;
        height: 100% !important;
    }

   

    .soft canvas {
        width: 100% !important;
        height: 100% !important;
    }

    #flipbook .page {
        height: 122px !important;
    }

  
    .soft img {
        margin-left: 47% !important;
    }

    .soft img.uploaded-inner-image {
        margin-left: inherit !important;
    }

    .page-wrapper {
        height: 122px !important;
    }

    #flipbook {
        height: 125px !important;
        width: 272px;
    }
    .soft canvas {
        width: 100% !important;
        height: 100% !important;
    }
}


@media screen and (max-width: 932px) and (orientation: landscape) {
    #flipbook {
        height: 270px !important;
    }

    .toptab-preview {
        padding: 0px !important;
    }

    .build_tab_content_box .submit_btn .common_button,
    .addToCart {
        padding: 17px 55px !important;
        float: none !important;
        margin-top: 0px !important;
    }


    .cart-content button.dropbtn {
        padding: 3px 12px;
        font-size: 10px;
    }

    .soft canvas {
        width: 100% !important;
        height: 100% !important;
    }

    #flipbook .page {
        height: 270px !important;
    }


    .soft img {
        margin-left: 47% !important;
    }

    .soft img.uploaded-inner-image {
        margin-left: inherit !important;
    }

    .page-wrapper {
        height: 270px !important;
    }

    .soft canvas {
        width: 100% !important;
        height: 100% !important;
    }
}

.mobile-nav-btns {
  display: none;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.round-btn {
  background: #ccc;
  color: #333;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: background 0.3s;
}

.round-btn:hover {
  background: #999;
}

@media (max-width: 768px) {
  .mobile-only {
    display: flex !important;
  }
}