.vc_section.feature-hero-section {
    padding-top: 100px;
    margin-top: -100px;
    background-position: bottom center !important;
}


.feature-hero-content-row {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
}
.feature-hero-tag {
    display: inline-flex;
    gap: 5px;
    border: 1px solid #FFC5A9;
    border-radius: 8px;
    padding: 10px;
    line-height: 1;
    background: #fff;
}


.post-exp-cont p, .hero-sub-text {font-size: 18px; font-weight: 600; }
.post-feature-img {position: relative; overflow: hidden; padding: 30px 20px; border-radius: 24px; background: linear-gradient(180deg, #FFE4D4 0%, #FFC5A9 100%); }
.post-feature-img img {max-height: 170px; margin: 0 auto; display: block; }
.post-c-img {margin-bottom: 20px; }
.post-f-img .sub-title {margin-bottom: 0; }
.post-feature-img .sub-title{ text-align: center; font-size: 22px;}
.feature-card-cont {text-align: center; margin-bottom: 30px; }
.feature-card-cont p {margin-bottom: 0; }

.post-feature-img .post-card-hover {
    border-radius: 24px;
    position: absolute;
    transform: translatey(120%);
    padding: 30px 20px;
    bottom: 0;
    right: 0;
    height: 100%;
    -webkit-transition: transform .65s cubic-bezier(.19,1,.22,1);
    -khtml-transition: transform .65s cubic-bezier(.19, 1, .22, 1);
    -moz-transition: transform .65s cubic-bezier(.19, 1, .22, 1);
    -ms-transition: transform .65s cubic-bezier(.19, 1, .22, 1);
    -o-transition: transform .65s cubic-bezier(.19, 1, .22, 1);
    transition: transform .65s cubic-bezier(.19,1,.22,1);
    background: linear-gradient(180deg, #FFC5A9 0%, #FFE4D4 100%);
}
.post-feature-img:hover .post-card-hover{
    transform: translatey(0);
}

.post-feature-card > .vc_column-inner {padding: 0; }
.vc_row.post-feature-row {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.vc_row.post-feature-row .post-feature-card {width: 100%; }












/**/
/* screens */

.os-screen {
    height: 390px;
    position: relative;
    background: #FFF3ED;
    padding: 30px 30px;
    border-radius: 20px;
    overflow: hidden;
    transition: all .6s ease;
}

.os-screen-detail {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    /* transform: translateY(40px); */
    background: linear-gradient(90deg, #FFE4D4 0%, #FFF3ED 100%);
}
.os-screen-detail.show{
    opacity:1;
    pointer-events:auto;
    /*transform:translateY(0);*/
}

.os-screen-main.hide{
    opacity:0;
    /*transform:translateY(-40px);*/
}


.os-title {
    font-size: 36px;
    font-weight: normal;
    line-height: 1.2;
}

/* label */
.os-label {
    display: inline-flex;
    background: #FFE4D4;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 10px;
    color: #000000;
    line-height: 1;
    align-items: center;
    gap: 5px;
}
.os-label:before {
    content: "";
    width: 10px;
    height: 10px;
    display: block;
    background: #FF8C5B;
    border-radius: 10px;
}
/* features */

.os-feature-list{
  
    display:flex;
    flex-direction:column;
    gap:14px;
}

.os-feature-list span {
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    background: linear-gradient(90deg, #FFE4D4 0%, rgba(255, 228, 212, 0) 100%);
    line-height: 1.4;
}

/* plus */

.os-plus-btn{
    position:absolute;
    right:30px;
    top:30px;
    width:48px;
    height:48px;
    border-radius:50%;
    background:#f2cbb3;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    cursor:pointer;
}

/* card */

.os-card {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 30px;
    max-width: 95%;
}
/* small label */

.os-small-label {
    font-size: 11px;
    letter-spacing: 2px;
    padding: 12px 20px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 15px;
    line-height: 1;
    background: #FFF3ED;
    font-weight: 600;
    color: #FF8C5B;
}
.os-right .os-small-label {
    background: #FFE4D4;
}
.os-right {
    padding: 15px;
    background: #FFFFFF66;
    border-radius: 10px;
}
.os-card .sub-title {
    margin-bottom: 15px;
    font-weight: 700;
}
.os-card p{
    font-size:15px;
    line-height:1.6;
    color:#5e5e5e;
}

/* stats */

.os-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:20px;
}

.os-stats .flip-points {
        align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid #FFE4D4;
    background: #FFFFFF66;
    line-height: 1;
    display: flex;
    gap: 5px;
}

.os-omnichannel-wrapper{
    position:relative;
}

/* toggle button */

.os-plus-btn{
    position:absolute;
    right:30px;
    top:30px;
    width:48px;
    height:48px;
    border-radius:50%;
    background:#f2cbb3;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    cursor:pointer;
    z-index:10;
}

/* icon change */

.os-plus-btn::before {
    content: "";
    background: url(/wp-content/uploads/2026/03/plus.svg) no-repeat center center;
    background-size: contain;
    width: 32px;
    height: 32px;
    transition: 0.3s;
}
.os-plus-btn.active::before {
    transform: rotate(45deg);
}
.os-screen-bottom {
    display: flex;
    justify-content: space-between;
    align-items: end;
    position: relative;
    z-index: 1;
}


.feature-first-row .os-top-line {
    position: absolute;
    top: 0;
    left: 0;
}
.feature-first-row .os-screen-bottom {
    padding-top: 140px;
}


/*small card*/
.os-icon-line {
    text-align: center;
}
.feature-two-col-row .os-system-card-col {
    width: 100%;
}
.vc_row.feature-two-col-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-inline: auto;
    gap: 24px;
}
.vc_row.feature-two-col-row:last-child {
    margin-bottom: 0;
}
.feature-card-row {
    margin-bottom: 24px;
}
.feature-two-col-row .os-system-card-col > .vc_column-inner {
    padding: 0;
}


.feature-two-col-row .os-screen-bottom {
    margin-top: -15px;
}

.os-title-img {
    display: flex;
    flex-direction: row-reverse;
    align-items: end;
    justify-content: flex-end;
    gap: 20px;
}

.os-small-card .os-card {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 100%;
}
.os-small-card .os-card .sub-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.os-small-card .os-card p {
    font-size: 14px;
}
.os-small-card .os-card .os-right p:last-child {
    margin-bottom: 0;
}
.os-screen-bottom-sec {
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: space-between;
}

.os-icon-line.os-rt-img {
    text-align: right;
}
.os-icon-line img {
    max-height: 210px;
    object-fit: contain;
}


/*third large card*/
.feature-third-large-row .os-title-img {
    flex-direction: column;
    gap: 0;
    max-width: 700px;
    width: 100%;
    align-items: flex-start;
}
.feature-third-large-row .os-title-img .os-top-line {
    width: 100%;
    text-align: right;
}
.os-small-card .os-screen {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}




@media (max-width: 1200px) {
.os-screen {height: 450px;}
.os-title {font-size: 30px;}
.os-feature-list {min-width: 260px; }
.flip-points img {width: 16px; }
.os-stats .flip-points { padding: 10px 10px; font-size: 12px;}
.os-small-card .os-card .sub-title {font-size: 16px;}
.os-title-img {flex-direction: column; }
.os-title-img img {max-height: 260px; }


/**/
.feature-third-large-row .os-screen-bottom-sec { height: 100%;}
.feature-third-large-row .os-title-img { height: 100%; justify-content: space-between;}


/**/
.post-feature-img .sub-title { font-size: 18px;}
.post-feature-img .post-card-hover { padding: 20px 15px;}
.post-feature-img img {max-height: 140px;}
.feature-card-cont { margin-bottom: 15px;}
.post-feature-img .post-card-hover .sub-title {margin-bottom: 8px; }




}


@media (max-width: 960px) {
.feature-hero-content-row { bottom: -40px;}
.os-card { max-width: 100%; grid-template-columns: 1fr;}
.vc_row.feature-two-col-row { grid-template-columns: 1fr;}
.os-small-card .os-screen {height: auto; }
.os-screen {height: 580px; }
.vc_row.post-feature-row { margin-inline: auto;}
}

@media (max-width: 767px) {
.feature-hero-content-row {top: 0; position: relative; bottom: unset; margin-top: -160px; }
.feature-first-row .os-screen-bottom {padding-top: 0; flex-direction: column; align-items: flex-start; gap: 30px; }
.feature-first-row .os-top-line {position: unset;}
.feature-two-col-row .os-screen-bottom {margin-top: 0; }
.os-screen-bottom-sec {align-items: self-start;flex-direction: column;}
.os-screen {height: auto;    padding: 25px; border-radius: 10px; }
.os-card { gap: 0; }
.os-title br {display: none; }
.os-plus-btn { right: 15px; top: 15px; width: 38px; height: 38px;}
.feature-third-large-row .os-title-img {gap: 20px;}
.os-small-card .os-screen {height: auto; gap: 20px; }
.os-screen {height: auto; }
.os-stats { grid-template-columns: 1fr; gap: 5px; margin-top: 10px;}
    
.os-screen-detail.show {overflow: auto;}
.os-icon-line.os-rt-img {text-align: center !important; }

}

@media (max-width: 480px) {
.main-title br {display: none; }
.feature-hero-content-row {margin-top: -65px;}
.os-title {font-size: 26px; }


}




.features-cards-section {
    padding-top: 0 !important;
}