.zwc-banner-templates{
    background-color: #f0f6fd;
    color: #000;
}
.zw-product-header{
    background-color: #f0f6fd;
}
 .zwc-banner-content{
     text-align: center;
     max-width: 830px;
     margin: auto;
}

.ztemplate_link{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

 h1{
     font-size: 50px;
     font-family: var(--zf-primary-bold);
}
 .zwc-banner-templates p{
     font-size: 20px;
     font-family: var(--primaryfont-medium);
}

 .zwc-wrapper.zwc-banner-templates {
     padding: 90px 0;
}
 .zwc-wrapper.zwc-reactions {
     padding: 20px 0 60px;
}
 .zwc-product {
     position: static;
     top: 65px;
     z-index: 1;
     padding: 15px 0;
     background-color: #fff;
}
 .act-btn{
     font-size: 18px;
     background: #2196f3;
     color: #fff;
     padding: 10px 40px;
     display: inline-block;
     font-family: var(--zf-primary-semibold);
     border: 2px solid #2196f3;
     transition: .3s all;
     border-radius: 3px;
}
.ztemplate_link a{
    font-size: 18px;
    background: #2196f3;
    color: #fff;
    padding: 10px 40px;
    display: inline-block;
    font-family: var(--zf-primary-semibold);
    border: 2px solid #2196f3;
    transition: .3s all;
    border-radius: 3px;
}
.ztemplate_link a.zl-live-demo{
    background: #000;
    border-color: #000;
}
 .zwc-header span {
     display: inline-block;
     width: 40px;
     height: 44px;
     border: 0 solid #ccc;
     cursor: pointer;
     background: url(https://www.zohowebstatic.com/sites/zweb/images/sites/templates/device_sprite.png) no-repeat;
     background-size: 150px;
     position: relative;
     transform: scale(0.9);
     margin: 0 10px;
}
 span.desktop{
     width: 50px;
     background-position: 0 0;
}
 span.ipad{
     height: 60px;
     background-position: -55px 0;
  
}
 span.mobile{
     height: 52px;
     background-position: -103px 0;

}
 .zwc-header{
     display: flex;
     flex-wrap: wrap;
     padding: 15px 0;
     justify-content: space-between;
     align-items: center;
}
.zwc-platform{
  height: 2520px;
}
 .zl-iframe{
     width: 100%;
     height: 100%;
}
.zwc-wrapper.zwc-reactions:before {
    content: "";
    position: absolute;
    border-radius: 10px;
    background: #f1f1f1;
    left: 0;
    right: 0;
    margin: auto;
    top: 60px;
    height: 6px;
}

#zmobile.zwc-wrapper.zwc-reactions:before{
    width: 40px;
    height: 6px;
}

.zwc-wrapper.zwc-reactions {
    transition: .5s ease;
}
#zmobile.zwc-wrapper.zwc-reactions {
    height: 703px;
    margin: 40px auto;
    width: 340px;
    background-size: 340px;
    background: #fafafa;
    border-radius: 30px;
    position: relative;
}
#zmobile .zwc-platform{
    height: 555px !important;
    width: 315px;
    display: inline-block;
    margin: 74px 0 66px 14px;
    border: 2px solid #efefef;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
}
@media (min-width: 1025px){
    #zipad.zwc-wrapper.zwc-reactions {
        background: #fafafa;
        height: 1242px;
        margin: 40px auto;
        width: 871px;
        border-radius: 25px;
        position: relative;
    }
    #zipad.zwc-wrapper.zwc-reactions:before{
        width: 60px;
    }
    #zipad .zwc-platform {
        height: 1038px !important;
        width: 783px;
        display: inline-block;
        margin: 106px 0 0 44px;
        border: 2px solid #efefef;
        border-radius: 14px;
        overflow: hidden;
        position: relative;
    }
}
@media (max-width: 1024px) {
    .zwc-header span.desktop {
        display: none;
    }
}
@media (max-width: 767px){
    .zwc-header span.ipad,.zwc-header span.mobile{
        display: none;
    }
    .zwc-header{
        justify-content: center;
    }
}