.product-design-section .product-tool-tab h3 {
    text-transform: capitalize;
}
@media (min-width: 1200px){
    .produt-designer-mockup .container,.produt-designer-mockup .container-lg,.produt-designer-mockup .container-md,.produt-designer-mockup .container-sm,.produt-designer-mockup .container-xl {
    max-width: 1340px;
}
}
.request-demo-button {
    border: none;
    background: #f2823a;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 20px;
    text-transform: uppercase;
    border-radius: 6px;
    display: inline-block;
    cursor: pointer;
    letter-spacing: 2px;
    font-size: 16px;
    -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    transition: all 0.3s ease 0s;
}
.request-demo-button:hover {
    color: #404040 !important;
    font-weight: 1000 !important;
    letter-spacing: 3px;
    background: none;
    -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    transition: all 0.3s ease 0s;
}

.produt-designer-mockup .main-title {
    font-size: 60px;
    letter-spacing: 2px;
    font-weight: 400;
    color: #495a7a;
}    
.produt-designer-mockup p.sub-heading
{
    color: #495a7a;
    font-weight: 500;
    font-size: 18px;
}
.produt-designer-mockup a:hover
{
    text-decoration: none;
}
.produt-designer-mockup ul
{
    list-style: none;
    width: 70%;
    padding: 0;
    text-align: center;
    margin: 0 auto;
}
.produt-designer-mockup .text-number{
    padding: 25px 8px;
    text-align: center;
    /*border: 1px solid #eee;*/
    margin: 14px 0;
    background-color: var(--p-surface, white);
    box-shadow: 0 1px 3px 0 #a0a0a0;
    outline: 0.1rem solid transparent;
    border-radius: 7px;
    transition: background-color 330ms ease-in;
    will-change: transform;
}

.produt-designer-mockup li.text-number:first-child,li:nth-child(5)
{
    margin-top: 0;
}
.produt-designer-mockup li.text-number:hover
{
    background-color:#495A7A; 
    cursor: pointer;

}
.produt-designer-mockup li.text-number:hover span
{
    color:#fff; 
}
.produt-designer-mockup span.text {
    font-size: 17px;
    padding-left: 0;
    text-align: left;
    font-weight: 500;
    transition: background-color 330ms ease-in;
    will-change: transform;
}
.produt-designer-mockup span
{
    color: #495A7A;
}
.produt-designer-mockup span.number {
    font-size: 35px;
    font-weight: 500;
    padding-right: 0;
    transition: background-color 330ms ease-in;
    will-change: transform;
}
.produt-designer-mockup .image-block
{
    /*width: 100%;*/
    text-align: center;
}
.produt-designer-mockup .description,.descriptionRe
{
    margin: 0 auto;
    width: 60%;
    border: 2px #000;
    border-style: dotted;
    border-radius: 14px;
    padding: 25px;
    font-size: 20px;
    background: #495a7a;
    color: #fff;
}
.produt-designer-mockup .image-block img
{
    width: 95%;
    margin: 5px 0;
    height: auto;
    transition: background-color 330ms ease-in;
    will-change: transform;
    /*transition: background-color 330ms*/
}
.produt-designer-mockup .active 
{
    background: #495a7a;
    color: #fff;
}
.produt-designer-mockup .active span
{
    color: #fff;
}
.produt-designer-mockup .sec1,.sec2,.sec3,.description,.descriptionRe
{
    position: relative;
}
.produt-designer-mockup div.sec1:before {
    background: #FFF2F9;
    padding: 25%;
    position: absolute;
    content: "";
    z-index: -13;
    border-radius: 50%;
    top: -50px;
    right: 0;
}
.produt-designer-mockup div.sec2:before {
    background: #FFF0E8;
    padding: 38%;
    position: absolute;
    content: "";
    z-index: -13;
    border-radius: 50%;
    bottom: -51%;
    /* right: 0; */
    left: -40%;
}
.produt-designer-mockup .description:after,.descriptionRe:after {
    background: #e7f6e6;
    padding: 18%;
    position: absolute;
    content: "";
    z-index: -13;
    border-radius: 50%;
    top: -75px;
    right: -44px;
}
.produt-designer-mockup div.sec3:before {
    background: #F2F5FF;
    padding: 33%;
    position: absolute;
    content: "";
    z-index: -13;
    border-radius: 50%;
    top: -25px;
    left: 0;
}
/*@media only screen and (max-width : 1024px) {*/
@media (max-width:1024px) and (min-width:500px) {
    .produt-designer-mockup ul.main-wrapper
    {
    width: 100%;

}
.produt-designer-mockup .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1240px;
}
.produt-designer-mockup .image-block img {
    width: 100%; 
}
.produt-designer-mockup .button-section .text-number
{
    margin: 40px 15px;
}

}
@media (max-width:900px) and (min-width:768px) {
    .produt-designer-mockup span.number
    {
    font-size:25px; 
}
.produt-designer-mockup span.text
{
    font-size:14px; 
}

}
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
@media  (max-width:500px) {
    body .produt-designer-mockup span.numberRe {
    font-size: 22px;
    font-weight: 500;
    padding: 0;
    transition: background-color 330ms ease-in;
    will-change: transform;
}
body .produt-designer-mockup span.textRe {
    font-size: 14px;
    text-align: center;
}
body .produt-designer-mockup .description,body .descriptionRe
{
    width:  100%;
}

}

@media  (max-width:767px) {
    .produt-designer-mockup div.sec1:before ,.produt-designer-mockup div.sec2:before ,.produt-designer-mockup .description:after,.descriptionRe:after ,.produt-designer-mockup div.sec3:before {
    display: none;
}

.produt-designer-mockup .description, .descriptionRe {
    margin: 0 auto;
    width: 70%;
    border: 2px #000;
    border-style: dotted;
    border-radius: 14px;
    padding: 14px;
    font-size: 12px;
    background: #495a7a;
    color: #fff;
}
.produt-designer-mockup .button-section .text-number {
    margin: 20px 15px;
}
body .produt-designer-mockup span.textRe,body .produt-designer-mockup span.numberRe {
    font-size: 16px;
    text-align: center;
}
body .produt-designer-mockup .slideshow {
    /* border: 5px black solid; */
    width: 280px;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
}
.produt-designer-mockup .image-block img {
    width: 280px;
    height: auto;
}
body .produt-designer-mockup li.text-number:first-child, li:nth-child(5) {
    margin: 0;
}
.previous.text-number,.next.text-number
{
    padding: 0;
    width: 15%;
}
}

.produt-designer-mockup .slideshow {
    /*border: 5px black solid;*/
    width: 280px;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
}

/* a freaking looooong strip of images */
.produt-designer-mockup .slideshow-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    width: 9999px;
    position: relative;
}

.produt-designer-mockup .slideshow-item {
    float: left;
    margin: 0;
    padding: 0;
}

.produt-designer-mockup .button-section {
    margin: 85px 0px 5px;
    display: flex;
}

.produt-designer-mockup  button.text-number {
    border: 0;
    box-shadow: none;
    outline: none;
    background: transparent;
}
/*.produt-designer-mockup .button-section .previous.text-number img
{
transform: scaleX(-1);
}*/
.produt-designer-mockup .button-section .text-number img {
    width: 50%;
}
.produt-designer-mockup .container.main-content .descriptionRe{
    margin: 80px auto;
    width: 80%;
    border: 2px #000;
    border-style: dotted;
    border-radius: 14px;
    padding: 25px;
    font-size: 30px;
}

.produt-designer-mockup span.numberRe
{
    font-size: 50px;
    font-weight: 500;
    padding-right: 0;
    transition: background-color 330ms ease-in;
    will-change: transform;
}
.produt-designer-mockup span.textRe {
    font-size: 30px;
    text-align: left;
}
@media  (min-width:767px) {
.produt-designer-mockup {
    padding-bottom: 70px;
}
}
@media  (max-width:767px) {
 .produt-designer-mockup .button-section {
    margin: 20px 0px 5px;
}   
}


/*09-03-2022*/
.produt-designer-mockup .main-content .text-number .text,
.produt-designer-mockup .main-content span.number,
.produt-designer-mockup .main-content .row div.col-md-6.col-sm-12{
    display: flex;
    align-items: center;
}
.produt-designer-mockup .main-content .text-number .text
{
    margin: 0 !important;
}

@media  (max-width:767px) {
    .produt-designer-mockup .main-wrapper .text-number  span.textRe
    {
        margin: 0 !important;
    }
    .produt-designer-mockup .container.main-content .descriptionRe
    {
        margin-top: 25px;
    }
    .produt-designer-mockup .main-content .slideshow.image-block
    {
        margin-top: 35px;
    }
}