.addButton {
    font-family: 'Raleway';
    display: flex;
    justify-items: flex-start;
    padding: 0.5rem 0rem;
    font-size: 1rem;
    cursor: pointer;
    width: max-content;


}

html {
    scroll-behavior: smooth;
}

/* .quantityContainer h1{
    color: black;
    font-family: 'Helvetica Neue';
    font-weight: 400;
    font-size: 40px;
} */
.tpl-alt-tabs>li>a.active,
.tpl-alt-tabs>li>a.active:hover,
.tpl-alt-tabs>li>a.active:focus {
    color: #825fea !important;
    border-bottom: 2px solid #825fea !important;
}

.CardBox li {
    font-size: 14px;
}

.sizeSelector {
    font-family: 'Raleway';
    padding: 0.5rem;
    font-size: 1rem;
    border-radius: 5px;
    border: 1px solid #ced4da;
}

.quantityInput {
    font-family: 'Raleway';
    max-width: 100px;
    padding: 0.5rem;
    font-size: 1rem;
    border-radius: 5px;
    border: 1px solid #ced4da;
}

.sizeButton {
    font-family: 'Raleway';
    padding: 0.2rem 1rem;
    font-size: 1rem;
    border-radius: 5px;
    border: 1px solid black;
    background-color: transparent;
    color: black;
    cursor: pointer;
    /* margin-right: 10px; */
    /* Space between buttons */
}

.variantOption {
    display: flex;
    gap: 8px;
}

.activeButton {
    font-family: 'Raleway';
    padding: 0.2rem 1rem;
    font-size: 1rem;
    border-radius: 5px;
    border: 1px solid #825fea;
    /* Purple border for active button */
    /* background: #825fea;
color: white; */
    background-color: transparent;
    color: #825fea;
    /* Purple text for active button */
    cursor: pointer;
    /* margin-right: 10px; */
}

.quantityInput {
    max-width: 100px;
    padding: 0.5rem;
    font-size: 1rem;
    border-radius: 5px;
    border: 1px solid #ced4da;
}

.Sticky_addBtn {
    display: flex;
    justify-content: flex-end;
    scroll-behavior: smooth;
}

.Sticky_addBtnCircle {
    border-radius: 50%;
    bottom: 10px;
    right: 10px;
    padding: 13px;
    position: fixed;
    z-index: 1;
    background-image: var(--gradient-primary-1);
    background-repeat: no-repeat;
}

.quantityControls {
    gap: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.row {
    width: 100%;
}

.quantityDisplay {
    font-size: 16px;
    font-family: "Helvetica Neue";
    font-weight: 400;
    color: black;

}

.quantityButton {
    min-width: 0;
    border-radius: 50%;
    width: 30px;
    /* padding: 7px; */
    justify-content: center;
    /* padding-bottom: 23px; */
    border: 1px solid;
    display: flex;
    font-size: 24px;
    align-items: center;
    /* padding: 12px; */
    font-weight: 500;
    height: 30px;
    color: black;
    background: transparent;
}



.quantityContainer {
    padding-left: 6px;
    padding-top: 5px;
    padding-bottom: 10px;
    font-family: 'Raleway';
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    gap: 8px;
    margin-bottom: 13px;
    height: max-content;
    /* background-color: #e7e7e7; */
    /* align-items: center; */
    /* border-radius: 5px; */

}

.quantityContainer h2 {
    color: black;
    font-family: 'Helvetica Neue';
    font-weight: 300;
    font-size: 30px;
    margin-bottom: 0;
}

.quantityLabel {
    margin-right: 0.5rem;
    color: black;
    font-family: 'Helvetica Neue';
    letter-spacing: 1px;
}

.quantityInput {
    width: 1.5rem;
    height: 1.5rem;
    /* Rounded corners for the input field */
    text-align: center;
    /* Center the number inside the input */
}

.star-reviews {
    display: flex;
    width: 6rem;
    gap: 0px;
    margin-bottom: 0.5rem;
}

.carousel-container {
    overflow: hidden;
    /* Hide the overflow */
    position: relative;
    margin-top: -4rem;
}

.reviews-carousel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* Ensures smooth scrolling */
}

.scroll-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ddd;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.scroll-left {
    left: 0;
}

.ProdBannner {
    background-color: #00000017;
    background-blend-mode: multiply;
    background-attachment: scroll;
}

.scroll-right {
    right: 0;
}

.review-card {
    margin: auto 1rem;
    background-color: white;
    padding: 20px;
    width: 434px;
    height: 200px;
    /* box-shadow: 0px 5px 11px 1px #c9c9c9; */
    border-radius: 3px;
    font-family: 'Raleway';
    display: flex;
    flex-direction: column;
}

.CardSubContainer {
    overflow: scroll;
    height: 100%;
}

.review-header {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    align-items: center;
    margin-bottom: 10px;
}

.review-card .reviewer-name {
    color: #727272;
    font-family: 'Raleway';
    font-size: 1.2em;
    font-weight: 500;
    letter-spacing: -0.01rem;
    margin-bottom: 5px;
}

.reviewer-name,
.stars {
    white-space: nowrap;
}

.review-card .stars {
    color: #e5a00d;

    margin-bottom: 10px;
}

.review-text {
    color: #727272;
    font-family: 'Raleway';
    font-size: 0.9em;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Number of lines you want to display */
    -webkit-box-orient: vertical;
}

.review-card .review-text {
    color: #666;
    font-family: 'Raleway';
    font-size: 0.9em;
    line-height: 1.6;
}

.btn-mod.btn-border {
    color: black;
    border: #000000 solid 1px;
}

.testimonial-item{
    background-color: #f7f7f7;
    width: 28rem;
    padding: 1rem 2rem;
}
.author-ratings{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.reviews {
    padding: 1rem 2rem;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    justify-content: center;
}

@font-face {
    font-family: "Raleway";
    src: url("/assets/fonts/Raleway-Bold.woff2") format("woff2"),
        url("/assets/fonts/Raleway-Bold.woff") format("woff");
    font-weight: bold;
    font-style: bold;
    font-display: swap;
}

@font-face {
    font-family: "Helvetica Neue";
    src: url("/assets/fonts/HelveticaNeue-Light.woff2") format("woff2"),
        url("/assets/fonts/HelveticaNeue-Light.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.innerStepsBox {
    flex-direction: column;
    background: white;
    border-radius: 50%;
    font-size: 15px;
    /* padding: 50px; */
    color: #474747;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.arrowArchway {
    position: absolute;
    background-image: linear-gradient(90deg, #8248c2 0%, #da57ff 28%, #8963ff 67%, #825fea 100%);
    ;
    background-repeat: no-repeat;
    border: none;
    width: 130px;
    height: 130px;
}

.Tipsforbr {
    font-family: "Raleway";
    display: flex;
    justify-content: space-between;
    /* padding: 20px; */
}

.Tipsbrcontent h2 {
    font-weight: 700;
}

.Tipsbrcontent p {
    line-height: 1.3;
    font-size: 16px;
}

.CardBox {
    border-radius: 3px;
    background: #eeeeee;
    padding: 20px;
    padding-top: 22px;
    width: 100%;
    height: 13rem;
}

.CardBox h4 {
    font-family: "Helvetica Neue";
    color: #865dff;
    font-size: 18px;
}

.Variant_Quantity {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.CardBox p {
    font-family: "Raleway";
    letter-spacing: normal;
    font-size: 0.9em;
    line-height: 1.6;
    margin: 0 0 0.3rem 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.cardTips {
    position: absolute;
    display: flex;
    gap: 20px;
    margin-top: 22rem;
    width: 62%;
}

.Tipsbrcontent {
    font-family: "Helvetica Neue";
    width: 90%;
    margin-top: 94px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ratingsImage {
    /* background-image: url(/images/demo-gradient/products/anti_itch/testimonial.jpg); */
    width: 100%;
    /* height: 10vh; */
    height: 34rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.ratingTestimony span img {
    width: 68%;
}

.ratingTestimony p {
    margin-bottom: 0;
}

.ratingHead {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;

}

.ratingTestimony:nth-child(1) {
    transform: translate(5%, 65%);
}

.alt-tabs-icon {
    display: flex;
    justify-content: center;
}

.ratingTestimony:nth-child(2) {
    transform: translate(19%, -50%);
}

.ratingHead h5 {
    margin-bottom: 0;
}

.starsRating {
    display: flex;
    width: 9rem;
    gap: 0px;
}

.ratingTestimony {
    padding: 15px;
    width: 31%;
    height: max-content;
    background-color: #ffffff;
    border-radius: 3px;
    /* box-shadow: 2px 4px 11px 0px #727272; */
}

.cutOutshape {
    transform: translate(-1px, -1px);
    background-color: white;
    border-top-left-radius: 100%;
    width: 101%;
    height: 101%;
    position: relative;
}

.mainStepContainer {
    display: flex;

    gap: 8px;
    justify-content: space-between;
    margin-top: 5%;
}

.tab-pane {
    display: flex;
    justify-content: center;
}

.stepCount {
    font-family: "Raleway";
    position: absolute;
    margin-left: 12px;
    margin-top: 3px;
    font-size: 20px;
    color: white;
    font-weight: 600;
}

.StepsBox {
    background-image: linear-gradient(90deg, #e748b1 0%, #b947d9 33%, #7752e7 67%, #825fea 100%);
    position: relative;
    width: 320px;
    border-radius: 50%;
    font-family: "Helvetica Neue";
    margin-top: 2px;
    height: 320px;
    text-align: center;
    border-image-slice: 1;
    padding: 1px;
}

.imageContainer {
    display: flex;
    gap: 1rem;

}

.main-image {
    flex: 1;

}

.other-image {
    display: flex;
    flex-direction: column;
}

.other-image-util {

    flex: 1;
    width: 100px;
    height: 72px;

    /* margin-bottom: 5px; */

}

.carousel-container {
    position: relative;
    margin: auto;
    overflow: hidden;
}

.product-page .alt-tabs-icon {
    /* margin-bottom: 20px; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide {
    display: visible;

}

.carousel-slide img {
    width: 100%;
    height: auto;
}

.ShopNowBtn {
    margin-top: 1rem;
    background: linear-gradient(90deg, #e748b1, #b947d9 33%, #7752e7 67%, #825fea);
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .3s;
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    text-decoration: none;
    transform: translateY(-50%);
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    user-select: none;
    color: #727272;
}

.prev:hover,
.next:hover {
    text-decoration: none;
}

.ProdDetails {
    margin-bottom: 2rem;
    color: black;
    font-family: 'Helvetica Neue';
}

.next {
    right: 0;
}

.prev {
    left: 0;
}

.tab-pane {
    display: none;
}

.tab-pane.show {
    display: flex;
}

.product-page .header .hs-title-1 {
    font-size: 42px !important;
    width: 82% !important;
    color: #000 !important;
}

.hs-title-1 {
    font-size: 42px !important;
    width: 82% !important;
    color: #000 !important;
    display: flex !important;
    align-items: center !important;
}

.product-page .header {
    height: 148vh;
}

@media screen and (min-width:975px) {
    .ProdBannner {
        height: 148vh;
    }

}

@media screen and (max-width:1480px) {
    .cardTips {
        width: 65%;
    }
}

@media screen and (max-width:1416px) {
    .cardTips {
        width: 75%;
        margin-top: 21rem;
    }
}

@media screen and (max-width:1400px) {
    .Tipsbrcontent {
        width: 80%;
    }
}

@media screen and (max-width: 1334px) {
    .StepsBox {
        width: 312px;
    }
}

@media screen and (max-width: 1300px) {
    .StepsBox {
        width: 298px;
        height: 298px;
    }

    .StepsHead {
        font-size: 28px;

    }

    .ratingsImage {
        height: 42rem;
        background-size: cover;
    }

    .ratingTestimony {
        width: 35%;
    }

    .ratingTestimony:nth-child(2) {
        transform: translate(14%, -50%);
    }

}

@media screen and (max-width: 1242px) {
    .StepsBox {
        width: 265px;
        height: 265px;
    }

    .innerStepsBox {
        font-size: 14px;
    }

}

@media screen and (max-width: 1200px) {
    .Tipsbrcontent {
        width: 92%;
    }

    .cardTips {
        width: 80%;
        margin-top: 19rem;
    }

    .CardBox {
        width: 45%;
    }

    .StepsHead {
        font-size: 28px;
    }
}

@media screen and (max-width: 1160px) {
    .cardTips {
        width: 93%;
        margin-top: 18rem;
    }

}

@media screen and (max-width: 1100px) {
    .mainStepContainer {
        justify-content: space-around;
        display: grid;
    }

    .product-page .header {
        height: 164vh;
    }

    .ProdDetails {
        margin-top: 33rem;
    }

    .stepContainer:nth-child(1) {
        grid-row-start: 1;
    }

    .stepContainer:nth-child(2) {
        grid-row-start: 1;
    }

    .StepsBox {
        width: 350px;
        height: 350px;
    }

    .StepsHead {
        font-size: 31px;
    }

    .innerStepsBox {
        font-size: 15px;
    }

}

@media screen and (max-width: 1000px) {
    .Tipsforbr {
        flex-direction: column;
        margin-top: 2rem;
    }

    .CardBox {
        width: 100%;
        height: max-content;
    }

    .cardTips {
        position: relative;
        margin-top: 17px;
        width: 100%;
        flex-direction: column;
    }

    .CardBox p {
        font-size: 14px;
    }

    .quantityLabel {
        position: absolute;
        margin-top: -1.7rem;
        font-size: 14px;
    }

}

@media screen and (max-width: 980px) {
    .BackProd {
        display: none;
    }

    .product-page .header::after {
        bottom: 15.5vh;
    }

    .charsAnimIn {
        font-size: 2.5rem;
        /* font-weight: 500; */
    }

    .btn-mod.btn-grad.btn-medium {
        padding: 13px 38px;
    }

    .ProdDetails {
        margin-top: 27.5rem;
        margin-left: 0;
        position: relative;
        top: -1.5rem;
    }

    .quantityContainer h2 {
        font-size: 30px;
    }

    .Variant_Quantity {
        gap: 2rem;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .activeButton {
        font-size: 1rem;
        padding: 0.5rem 01rem;
    }

    .quantityLabel {
        position: absolute;
        margin-top: -1.8rem;
        font-size: 15px;
    }

    .sizeButton {
        font-size: 1rem;
        padding: 0.2rem 1rem;
    }

    .product-page .header {
        height: 120vh;
    }

    .quantityDisplay {
        font-size: 13px;
    }

    .quantityContainer {
        margin-top: -25px;
    }

    .quantityButton {
        width: 30px;
        height: 30px;
    }

    .product-page .header .btn-mod.btn-small {
        margin-bottom: 10px;
    }

    .quantityContainer {
        padding-bottom: 4px;

    }

    .variantOption {
        height: max-content;
    }


}

@media screen and (max-width: 970px) {
    .Tipsbrcontent p {
        font-size: 15px;
        letter-spacing: 0.3px;
    }

    .StepsBox {
        width: 320px;
        height: 320px;
    }

    .StepsHead {
        font-size: 28px;
    }

    .innerStepsBox {
        font-size: 15px;
    }
}

@media screen and (max-width: 950px) {
    .product-page .header::after {
        bottom: 13.5vh;
    }

    .btn-animate-y {
        height: 1.7rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-mod.btn-small {
        padding: 0px 12px;
    }


    .CardBox p {
        font-size: 17px;
    }

    .CardBox h4 {
        font-size: 24px;
    }

    .ratingTestimony p {
        font-size: 16px;
    }

    .Tipsbrcontent {
        margin-top: 14px;
    }

    .CardBox {
        width: 100%;
        height: max-content;
    }


}

@media screen and (max-width: 850px) {
    .charsAnimIn {
        font-size: 2.2rem;
    }

    .page-section,
    .split-column-left,
    .split-column-right {
        padding-top: 2rem;
        padding-bottom: 0;
    }

    .product-page .header::after {
        position: absolute;
        right: 4vw;
        bottom: 18vh;
    }

    .ProdDetails {
        margin-top: 27.5rem;
        margin-left: 0;
        position: relative;
        top: -1.5rem;
    }

    .quantityButton {
        width: 25px;
        height: 25px;
    }

}

@media screen and (max-width: 770px) {
    .StepsBox {
        width: 290px;
        height: 290px;
    }

    .tpl-alt-tabs>li>a {
        padding-bottom: 14px;
    }

    .mainStepContainer {
        flex-wrap: wrap;
        padding: 23px;
    }

    .sectionImage_sliding {
        margin-bottom: 2rem;
    }

    .sectionImage_sliding .position-relative .row {
        margin-left: 0;
    }

    .quantityContainer {
        gap: 15px;
    }

    /* .carousel-container {
        padding-bottom: 2rem;

    } */

    .charsAnimIn {
        font-size: 2.2rem;
        /* font-weight: 500; */
    }

    .cardTips {
        position: relative;
        margin-top: 17px;
        width: 100%;
        flex-direction: column;
    }

    .Tipsforbr {
        flex-direction: column;
    }

    .ratingTestimony p {
        font-size: 14px;
    }

    .ratingHead h5 {
        font-size: 15px;
    }

    .Tipsbrcontent {
        margin-top: 14px;
    }

    .ratingTestimony span img {
        width: 1rem;
    }

    .starsRating {
        gap: 2px;
    }

    .ratingTestimony:nth-child(1) {
        display: none;
    }

    .CardBox {
        width: 100%;
        height: max-content;
    }

    .section-title-small {
        font-size: 36px;
    }

    .page-sec-Tips {
        padding: 20px;
        margin-top: 5%;
    }

    .ratingsImage {
        height: 42rem;
        background-size: cover;
        background-position: unset;
        background-position-x: 41%;
    }

    .ratingTestimony:nth-child(2) {
        transform: translate(-5%, 67%);
    }

    .ratingTestimony {
        width: 58%;
    }

    .product-page .header {
        height: 105vh;
    }

    .product-page .header::after {
        position: absolute;
        right: 4vw;
        bottom: 8vh;
    }

    .ProdDetails {
        top: -4rem;
        margin-left: 0;
        position: relative;
    }

    .btn-mod.btn-grad.btn-medium {
        padding: 8px 18px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 770px) and (-webkit-appearance:none) {
    .product-page .header {
        height: 104vh;
    }

    .product-page .header .hs-title-1 {
        font-size: 42px;
        width: 70%;
        color: #000;
    }

    .ProdDetails {
        top: -4rem;
        margin-left: 0;
        position: relative;
    }
}

@media screen and (max-width:724px) {
    .mainStepContainer {
        display: grid;
        padding: 0;
        justify-content: space-around;
    }

    .hs-title-1 {
        height: 1.5rem !important;
        margin-bottom: 0.3rem !important;
    }

    .stepContainer:nth-child(1) {
        grid-row-start: 1;
    }

    .stepContainer:nth-child(2) {
        grid-row-start: 1;
    }

    .StepsHead {
        font-size: 31px;
    }

    .innerStepsBox {
        font-size: 13px;
    }

    .arrowArchway {
        width: 130px;
        height: 130px;
    }

    .StepsBox {
        width: 280px;
        height: 280px;
    }

    .section-descr {
        font-size: 16px;
    }
}



@media screen and (max-width: 690px) {
    .StepsBox {
        width: 250px;
        height: 250px;
    }

    .arrowArchway {
        width: 110px;
        height: 110px;
    }

    .StepsHead {
        font-size: 27px;
    }

    .innerStepsBox {
        font-size: 12px;
    }

    .product-page .tab-pane blockquote p {
        font-size: 16px;
    }



}


@media screen and (max-width: 640px) {
    .ProdDetails {
        top: -4rem;
        margin-left: 0;
        position: relative;
    }

    .product-page .header::after {
        bottom: 1vh;
    }

}

@media screen and (max-width: 630px) {
    .ProdDetails {
        margin-top: 20.6rem;
    }

}

/* @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 630px) {
    .ProdDetails {
        margin-top: 17.6rem;
    }
} */

@media screen and (max-width: 600px) {
    .mainStepContainer {
        display: grid;
        padding: 0;
        justify-content: space-around;
    }

    .tpl-alt-tabs>li {
        font-size: 14px;
    }

    .tpl-alt-tabs li .alt-tabs-icon img {
        width: 78%;
    }

    .stepContainer:nth-child(1) {
        grid-row-start: 1;
    }

    .stepContainer:nth-child(2) {
        grid-row-start: 1;
    }

    .innerStepsBox {
        font-size: 10px;
    }

    .arrowArchway {
        width: 110px;
        height: 110px;
    }

    .StepsBox {
        width: 230px;
        height: 230px;
    }

    .quantityButton {
        width: 25px;
        height: 25px;
    }

    .quantityLabel {
        font-size: 12px;
    }

    .quantityContainer {
        padding-left: 4px;
        padding-top: 3px;
        padding-bottom: 7px;
        margin-top: -8px;

    }

    .StepsHead {
        font-size: 25px;
    }

    .other-image-util {
        width: 85px;
        height: 70px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 550px) and (-webkit-appearance:none) {
    .ProdDetails {
        margin-top: 13.7rem;
    }
}

@media screen and (max-width:550px) {
    .charsAnimIn {
        font-size: 1.7rem;
    }

    .other-image-util {
        width: 70px;
        height: 70px;
    }

    .product-page .header {
        height: 81vh;
    }

    .ProdDetails {
        top: -2rem;
        margin-left: 0;
        position: relative;
    }

    .hs-title-1 {
        width: 60%;
    }

    .activeButton {
        font-size: 0.7rem;
        padding: 0.2rem 0.7rem;
    }

    .quantityLabel {
        position: absolute;
        margin-top: -1.4rem;
    }

    .sizeButton {
        font-size: 0.7rem;
        padding: 0.2rem 0.7rem;
    }

}

@media screen and (max-width:500px) {
    .product-page .header {
        height: 85vh;
        background-position-x: 45% !important;
    }

    .other-image-util {
        width: 56px;
        height: 70px;
    }

    .ProdDetails {
        top: 2rem;
        margin-left: 0;
        position: relative;
    }

    .ratingTestimony {
        width: 78%;
    }

    .ratingTestimony:nth-child(1) {
        transform: translate(-9%, 52%);
    }

    .ratingsImage {
        height: 34rem;
        background-position-x: 52%;
    }
    .testimonial-item{
        width: 22rem;
    }
    .arrowArchway {
        width: 95px;
        height: 95px;
    }

    .stepCount {
        font-size: 17px;
    }

    .StepsBox {
        width: 202px;
        height: 202px;
    }

    .StepsHead {
        font-size: 21px;
    }

}


@media screen and (max-width: 430px) {

    .section-title-small {
        font-size: 25px;
    }

    .stepCount {
        font-size: 12px;
    }

    .arrowArchway {
        width: 75px;
        height: 75px;
    }

    .tpl-alt-tabs li .alt-tabs-icon img {
        width: 70%;
    }

    .tpl-alt-tabs>li {
        font-size: 14px;
    }

    .StepsBox {
        width: 160px;
        height: 160px;
    }

    .ProdDetails {
        margin-top: 11rem;
    }

    .product-page .header {
        height: 69vh;
        background-position-x: 45% !important;
    }

    .charsAnimIn {
        font-size: 1.3rem;
    }

    .quantityContainer {
        margin-bottom: 6px;
    }

    .quantityContainer h2 {
        font-size: 18px;
    }

    .innerStepsBox {
        font-size: 9px;
    }

    .StepsHead {
        font-size: 12px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:1) and (max-width: 430px) and (pointer: coarse) {
    .ProdDetails {
        margin-top: 9rem;
    }
}

@media screen and (max-width: 404px) {
    .ratingTestimony:nth-child(1) {
        transform: translate(-3%, 40%);
    }

    .Tipsbrcontent h2 {
        font-size: 24px;
    }

    .ratingTestimony {
        width: 88%;
    }
}

@media screen and (max-width:400px) {
    .other-image-util {
        width: 48px;
        height: 70px;
    }
}

@media screen and (max-width: 400px) {
    .BackProd {
        display: none;
    }

    .charsAnimIn {
        font-size: 1.2rem;
        /* font-weight: 500; */
    }

    .ProdDetails {
        margin-top: 14.6rem;
    }

    .quantityContainer h2 {
        font-size: 20px;
    }

    .product-page .header .btn-mod.btn-small {
        margin-bottom: 180px;
    }

    .Variant_Quantity {
        gap: 1rem;
        display: flex;
        align-items: center;
    }

    .activeButton {
        font-size: 0.7rem;
        padding: 0.2rem 0.7rem;
    }

    .quantityLabel {
        position: absolute;
        margin-top: -1.4rem;
    }

    .sizeButton {
        font-size: 0.7rem;
        padding: 0.2rem 0.7rem;
    }

    .product-page .header::after {
        position: absolute;
        right: 4vw;
        bottom: 0.5vh;
    }

    .product-page .header {
        height: 85vh;
    }

    .quantityDisplay {
        font-size: 13px;
    }

    .quantityContainer {
        margin-top: -25px;
    }

    .quantityButton {
        width: 18px;
        height: 18px;
    }

    .product-page .header .btn-mod.btn-small {
        margin-bottom: 10px;
    }

    .quantityContainer {
        padding-bottom: 4px;

    }

    .variantOption {
        height: max-content;
    }


}

@media screen and (max-width: 395px) {
    .ProdDetails {
        margin-top: 11.6rem;
    }

    .product-page .header {
        height: 77vh;
        background-position-x: 40% !important;
    }

}

@media screen and (-webkit-min-device-pixel-ratio:1) and (max-width: 395px) and (pointer: coarse) {
    .ProdDetails {
        margin-top: 8rem;
        /* background-color: #666; */
    }
}

@media screen and (max-width: 385px) and (max-height:668px) {
    .ProdDetails {
        position: relative;
        top: 2rem;
    }

    .product-page .header {
        height: 90vh;
        background-position-x: 40% !important;
    }
}

@media screen and (max-width: 370px) {
    .ProdDetails {
        margin-top: 10rem;
    }

    .product-page .header {
        height: 83vh;
        background-position-x: 40% !important;
    }
}

@media screen and (max-width: 350px) {
    .ProdDetails {
        margin-top: 10rem;
    }

    .product-page .header {
        height: 70vh;
        background-position-x: 35% !important;
    }
}